這篇文章主要介紹CSS怎么實(shí)現(xiàn)選項(xiàng)卡切換效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)確山,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

利用錨點(diǎn)的思想可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的選項(xiàng)卡切換效果。

頁(yè)面布局及樣式：

  
1
  
2
  
3
  
4


  1
  2
  3
  4
 

......

.box {
   height: 10em;
   border: 1px solid #ddd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ddd;
}

容器設(shè)置了 overflow:hidden，且每個(gè)列表高度和容器的高度一樣高，這樣保證永遠(yuǎn) 只顯示一個(gè)列表。當(dāng)我們點(diǎn)擊按鈕，如第三個(gè)按鈕，會(huì)改變 URL 地址的錨鏈為#three，從 而觸發(fā) id 為 three 的第三個(gè)列表發(fā)生的錨點(diǎn)定位，也就是改變?nèi)萜鳚L動(dòng)高度讓列表 3 的上 邊緣和滾動(dòng)容器上邊緣對(duì)齊，從而實(shí)現(xiàn)選項(xiàng)卡效果。

但是這種方式有一定的不足之處：

• 其一，容器高度需要固定;

• 其二，錨點(diǎn)定位會(huì)觸發(fā)窗體的重定位，也就是如果頁(yè)面可以滾動(dòng)，那么點(diǎn)擊選項(xiàng)頁(yè)面也會(huì)發(fā)生跳動(dòng)

為了改變這種情況，下面利用下面的方式。頁(yè)面布局為:

    
1
    
2
    
3
    
4


    1
    2
    3
    4

這樣寫就算頁(yè)面窗體就有滾動(dòng)條，絕大多數(shù)情況下，也都不會(huì)發(fā)生跳動(dòng)現(xiàn)象。其原理就是在每個(gè)列表里塞入一個(gè)肉眼看不見的輸入框，然后選項(xiàng)卡按鈕變成元素，并通過(guò) for 屬性與輸入框的 id 相關(guān)聯(lián)，這樣，點(diǎn)擊選項(xiàng)按鈕會(huì)觸發(fā)輸入框的 focus 行為，觸發(fā)錨點(diǎn)定位，實(shí)現(xiàn)選項(xiàng)卡切換效果。

但是上面這種技術(shù)要想用在實(shí)際項(xiàng)目中還離不開JavaScript 的支持，一個(gè)是選項(xiàng)卡按鈕的選中效果，另一個(gè)就是處理列表部分區(qū)域在瀏覽器外面時(shí)依然會(huì)跳動(dòng)的問(wèn)題。
相關(guān)處理類似下面的做法，使用 jQuery 語(yǔ)法:

$('label.click').removeAttr('for').on('click', function() { $('.box').scrollTop(xxx); 'xxx'表示滾動(dòng)數(shù)值
});

以上是CSS怎么實(shí)現(xiàn)選項(xiàng)卡切換效果的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！