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

資訊專(zhuān)欄INFORMATION COLUMN

善用CSS偽類(lèi)，不用JS也能做出選項(xiàng)卡功能

luoyibu / 499人閱讀

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

先看看Demo:

CODEPEN 示例頁(yè)面

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

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

通常我們會(huì)用列表元素來(lái)制作選項(xiàng)卡的界面，每個(gè)

  • 代表用來(lái)包含一組選項(xiàng)卡與其對(duì)應(yīng)的內(nèi)容塊。

    接下來(lái)加入選項(xiàng)卡，選項(xiàng)卡必須使用

    內(nèi)容塊則是

    元素。

    再來(lái)我們?yōu)槊總€(gè)

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

    這篇文章的主要技巧也就是要靠這兩種元素的特性，因?yàn)槲覀円敖栌谩盧adio button的單選特性，決定哪個(gè)Tab是Active，同時(shí)確保其他Tab是未選中的狀態(tài)。

    Radio button默認(rèn)的樣式是非常丑陋的，而且我們能改動(dòng)的樣式也是有限的，所以不建議直接把它設(shè)計(jì)成Tab，所以我們使用

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

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

    這樣就完成我們的HTML結(jié)構(gòu)了，再來(lái)要寫(xiě)點(diǎn)CSS，讓功能得以運(yùn)作起來(lái)。

    寫(xiě)點(diǎn)CSS

    我們先讓

  • 并排（display:inline-block）。

    再來(lái)為

    設(shè)計(jì)外觀。

    特別注意內(nèi)容塊用絕對(duì)定位讓每次顯示的內(nèi)容都在同樣的位置，之后我們?cè)倏刂茖盈B等級(jí)（z-index）和透明度（opacity）來(lái)實(shí)現(xiàn)顯示/隱藏。

    li { display: inline-block; }

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

.tab {
    ...
}

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

    咦？還是不能動(dòng)？因?yàn)槲覀冞€需要運(yùn)用CSS的兩個(gè)重要技巧：偽類(lèi)（Pseudo-class）和通用兄弟元素選擇器（Sibling Combinator），才能讓選項(xiàng)卡與內(nèi)容塊做切換。

    加入CSS偽類(lèi)與通用兄弟元素選擇器

    我們?yōu)镽adio button加上偽類(lèi)：checked，表示當(dāng)這個(gè)Radio button被選中時(shí)（等于對(duì)應(yīng)的標(biāo)簽被選中使）才會(huì)呈現(xiàn)的樣式。

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

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

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

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

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

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

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

    注意內(nèi)容內(nèi)存塊（.section）要加上z-index屬性才能覆蓋其它選項(xiàng)卡的內(nèi)容塊，最后我們?cè)賹adio button設(shè)為透明或使用定位的技巧讓它消失在頁(yè)面上，前面沒(méi)有先提這點(diǎn)的原因，是因?yàn)榭梢宰屇阍邳c(diǎn)選選項(xiàng)卡時(shí)，觀察Radio button的選中狀態(tài)變化，同時(shí)也方便測(cè)試，確認(rèn)選項(xiàng)卡對(duì)應(yīng)的Radio button有正確被觸發(fā)。

    這樣就大功告成啦！

    整理

    大略整理一下重點(diǎn)與需要注意的地方：

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

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

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

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

    注意z-index的設(shè)置是否正確。

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

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

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

    • 相關(guān)文章

    • 善用CSS偽類(lèi)，不用JS也能做出選項(xiàng)卡功能

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

      XUI 評(píng)論0 收藏0

    • 善用CSS偽類(lèi)，不用JS也能做出選項(xiàng)卡功能

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

      levius 評(píng)論0 收藏0

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

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

      imingyu 評(píng)論0 收藏0

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

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

      pekonchan 評(píng)論0 收藏0

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

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

      娣辯孩 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <