成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

善用CSS偽類，不用JS也能做出選項卡功能

XUI / 2168人閱讀

摘要：取決于你的高度咦還是不能動因為我們還需要運用的兩個重要技巧偽類和通用兄弟元素選擇器，才能讓選項卡與內(nèi)容塊做切換。加入偽類與通用兄弟元素選擇器我們?yōu)榧由蟼晤?，表示當這個被選中時等于對應的標簽被選中使才會呈現(xiàn)的樣式。

先看看Demo:

CODEPEN 示例頁面

講到選項卡（Tabs）功能時，大多會想到用JavaScript去做，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery實現(xiàn)的（其實網(wǎng)絡上有很多用jQuery開發(fā)的Tab）；但其實不用jQuery或JavaScript技術(shù)，就能實現(xiàn)高效能且易維護的Tabs元件，讓我們來看看是怎么辦到的：

規(guī)劃HTML結(jié)構(gòu)

通常我們會用列表元素來制作選項卡的界面，每個

  • 代表用來包含一組選項卡與其對應的內(nèi)容塊。

    接下來加入選項卡，選項卡必須使用

    內(nèi)容塊則是

    元素。

    再來我們?yōu)槊總€

      
  
    • 
    
    
    
      內(nèi)容A
      
  
      • 
  
    • 
    
    
    
      內(nèi)容B
      
  
      • 
  
    • 
    
    
    
      內(nèi)容C
      
  
      •
    為什么使用Label與Radio button？

    這篇文章的主要技巧也就是要靠這兩種元素的特性，因為我們要“借用”Radio button的單選特性，決定哪個Tab是Active，同時確保其他Tab是未選中的狀態(tài)。

    Radio button默認的樣式是非常丑陋的，而且我們能改動的樣式也是有限的，所以不建議直接把它設計成Tab，所以我們使用

    所以我們?yōu)镽adio button加上id，然后將Label的for屬性指向?qū)膇d：

      
  
    • 
    
    
    
      內(nèi)容A
      
  
      • 
  
    • 
    
    
    
      內(nèi)容B
      
  
      • 
  
    • 
    
    
    
      內(nèi)容C
      
  
      •

    這樣就完成我們的HTML結(jié)構(gòu)了，再來要寫點CSS，讓功能得以運作起來。

    寫點CSS

    我們先讓

  • 并排（display:inline-block）。

    再來為

    設計外觀。

    特別注意內(nèi)容塊用絕對定位讓每次顯示的內(nèi)容都在同樣的位置，之后我們再控制層疊等級（z-index）和透明度（opacity）來實現(xiàn)顯示/隱藏。

    li { display: inline-block; }

input[type="radio"] {
  position: absolute;
  outline: none;
    ...
}

.tab {
    ...
}

.section {
  position: absolute;
  top: 50px; // 取決于你的Label高度
  left: 0;
    ...
}

    咦？還是不能動？因為我們還需要運用CSS的兩個重要技巧：偽類（Pseudo-class）和通用兄弟元素選擇器（Sibling Combinator），才能讓選項卡與內(nèi)容塊做切換。

    加入CSS偽類與通用兄弟元素選擇器

    我們?yōu)镽adio button加上偽類：checked，表示當這個Radio button被選中時（等于對應的標簽被選中使）才會呈現(xiàn)的樣式。

    input[type="radio"]:checked {
    ...
}

    然后要做切換動作的是選項卡和內(nèi)容塊，由于它們與Radio button屬同一層父元素，所以我們這里要用到通用兄弟元素選擇器~來做，通用兄弟元素選擇器有兩種：

    相鄰兄弟選擇器（Adjacent Sibling Combinator）是用來選擇互為兄弟元素的相鄰的元素。

    通用兄弟元素選擇器（General Sibling Combinator）則是用來選擇互為兄弟元素的所有匹配的元素。

    我們使用通用兄弟元素選擇器即可：

    input[type="radio"]:checked ~ .tab {        // 這里也可以使用相鄰兄弟選擇器來做
    ...
}

input[type="radio"]:checked ~ .section {
    ...
  z-index: 2;
}

    注意內(nèi)容內(nèi)存塊（.section）要加上z-index屬性才能覆蓋其它選項卡的內(nèi)容塊，最后我們再將Radio button設為透明或使用定位的技巧讓它消失在頁面上，前面沒有先提這點的原因，是因為可以讓你在點選選項卡時，觀察Radio button的選中狀態(tài)變化，同時也方便測試，確認選項卡對應的Radio button有正確被觸發(fā)。

    這樣就大功告成啦！

    整理

    大略整理一下重點與需要注意的地方：

    Radio button的單選特性是基于同樣的name屬性，所以name一定要設，而且要一樣；反之，你可以設置多組name去實現(xiàn)多組的選項卡組件，而且各自是獨立運作，不會互相影響。

    Radio button的id和Label的for是必要的屬性。

    內(nèi)容塊的定位要避免覆蓋到選項卡。

    注意HTML的結(jié)構(gòu)是否正確，CSS選擇器的使用是否正確（選項卡和內(nèi)容塊有沒有在同一層）。

    注意z-index的設置是否正確。

    本篇文章的技術(shù)給予選項卡UI另一種開發(fā)的選擇，Radio button的特性還有很多應用可以做（如Switcher），只要善用HTML表單元素與CSS的一些技巧，也能玩出很多有趣的功能，甚至替代JavaScript的部份工作。

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109596.html

    • 相關(guān)文章

    • 善用CSS偽類，不用JS也能做出選項卡功能

      摘要：取決于你的高度咦還是不能動因為我們還需要運用的兩個重要技巧偽類和通用兄弟元素選擇器，才能讓選項卡與內(nèi)容塊做切換。加入偽類與通用兄弟元素選擇器我們?yōu)榧由蟼晤悾硎井斶@個被選中時等于對應的標簽被選中使才會呈現(xiàn)的樣式。 先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例頁面 講到選項卡（...

      levius 評論0 收藏0

    • 善用CSS偽類，不用JS也能做出選項卡功能

      摘要：取決于你的高度咦還是不能動因為我們還需要運用的兩個重要技巧偽類和通用兄弟元素選擇器，才能讓選項卡與內(nèi)容塊做切換。加入偽類與通用兄弟元素選擇器我們?yōu)榧由蟼晤?，表示當這個被選中時等于對應的標簽被選中使才會呈現(xiàn)的樣式。 先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例頁面 講到選項卡（...

      luoyibu 評論0 收藏0

    • 《CSS重構(gòu)：樣式表性能調(diào)優(yōu)》讀書筆記

      摘要：特指度度量的是選擇器識別元素的精確性。為中的各個變量賦予相應的數(shù)值，就能得到特指度。為類選擇器屬性選擇器和偽類的數(shù)量。該文件包含選項卡組的樣式。易于混淆的屬性，應用注釋予以說明。屬性按照字母順序排列。屬性值為時，省略單位。 1、什么是優(yōu)秀的架構(gòu) （1）優(yōu)秀的架構(gòu)是可預測的（2）優(yōu)秀的架構(gòu)是可擴展的（3）優(yōu)秀的架構(gòu)可提升代碼復用性（4）優(yōu)秀的架構(gòu)可擴展（5）優(yōu)秀的架構(gòu)可維護什么時候可以重...

      imingyu 評論0 收藏0

    • webpack多頁應用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

      摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標題中強調(diào)該去則去，該留則留。但后來我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

      pekonchan 評論0 收藏0

    • webpack多頁應用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

      摘要：瀏覽器緩存簡單介紹下面來簡單介紹一下瀏覽器緩存，以及為何我要在標題中強調(diào)該去則去，該留則留。但后來我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。 本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

      娣辯孩 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <