国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

levius / 1035人閱讀

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

先看看Demo:

CODEPEN 示例頁面

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

規劃HTML結構

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

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

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

    內容塊則是

    元素。

    再來我們為每個

      
  
    • 
    
    
    
      內容A
      
  
      • 
  
    • 
    
    
    
      內容B
      
  
      • 
  
    • 
    
    
    
      內容C
      
  
      •
    為什么使用Label與Radio button？

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

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

    所以我們為Radio button加上id，然后將Label的for屬性指向對應的id：

      
  
    • 
    
    
    
      內容A
      
  
      • 
  
    • 
    
    
    
      內容B
      
  
      • 
  
    • 
    
    
    
      內容C
      
  
      •

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

    寫點CSS

    我們先讓

  • 并排（display:inline-block）。

    再來為

    設計外觀。

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

    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），才能讓選項卡與內容塊做切換。

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

    我們為Radio button加上偽類：checked，表示當這個Radio button被選中時（等于對應的標簽被選中使）才會呈現的樣式。

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

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

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

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

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

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

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

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

    這樣就大功告成啦！

    整理

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

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

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

    內容塊的定位要避免覆蓋到選項卡。

    注意HTML的結構是否正確，CSS選擇器的使用是否正確（選項卡和內容塊有沒有在同一層）。

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

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

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114655.html

    • 相關文章

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

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

      XUI 評論0 收藏0

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

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

      luoyibu 評論0 收藏0

    • 《CSS重構：樣式表性能調優》讀書筆記

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

      imingyu 評論0 收藏0

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

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

      pekonchan 評論0 收藏0

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

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

      娣辯孩 評論0 收藏0

    發表評論

    0條評論

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