js自定義Tab選項(xiàng)卡效果
自定義Tab選項(xiàng)卡,具體內(nèi)容如下
規(guī)范HTML格式
在設(shè)計選項(xiàng)卡之前,先規(guī)范一下HTML的格式。
<div class="m-tab-container"> <ul > <li class="active"><a href="#pane1">面板1</a></li> <li><a href="#pane2" rel="external nofollow" >面板2</a></li> </ul> <div> <div id="pane1" class="active"> 這是面板1 </div> <div id="pane2"> 這是面板2 </div> </div> </div>
如上述代碼所示,這里并沒有聲明太多類名,只有容器樣式類m-tab-Container和激活樣式類active兩個。其他元素的樣式都是通過這兩個類一層一層往下找然后進(jìn)行設(shè)置。
設(shè)計CSS樣式
.m-tab-container{ display:flex; } .m-tab-container>ul, .m-tab-container>div{ padding:0; margin:0; } .m-tab-container>ul{ flex:0; min-width:50px; } .m-tab-container>div{ position:relative; flex:1; border:1px solid #ddd; background-color:#fff; padding:10px; z-index:2; } .m-tab-container>ul>li{ display:block; margin:0 0 5px 0; } .m-tab-container>ul>li>a{ position:relative; line-height:40px; display:block; width:100%; text-align:center; text-decoration:none; background-color:#fff; border: 1px solid #ddd; border-right:0; z-index:1; } .m-tab-container>ul>li>a, .m-tab-container>ul>li.active>a:hover, .m-tab-container>ul>li.active>a:link, .m-tab-container>ul>li.active>a:visited, .m-tab-container>ul>li.active>a:active{ color:#000; } .m-tab-container>ul>li.active>a{ z-index:3; } .m-tab-container>div>div{ display:none; } .m-tab-container>div>div.active{ display:block; } .m-tab-container>ul>li.active, .m-tab-container>ul>li.active>a{ cursor: default; }
li里面的a標(biāo)簽display設(shè)置成block后,長度超過了li,能夠覆蓋掉內(nèi)容面板的邊框形成空缺(經(jīng)過測試,li設(shè)置邊框之后和內(nèi)容面板的div邊框相距不足1px,也可以使用margin讓li和div重疊,然后用li覆蓋掉div的邊框)。
綁定JS代碼
(function($) { // 頁面加載后的工作 $("div.m-tab-container li a").on("click", function(e) { e.preventDefault(); // 可以在這里判斷被點(diǎn)擊的a標(biāo)簽是否已經(jīng)激活 $(".active").removeClass("active"); $(this).closest("li").addClass("active") $($(this).attr("href")).addClass("active"); }) })(jQuery);
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)簡單選項(xiàng)卡功能
- vuejs實(shí)現(xiàn)標(biāo)簽選項(xiàng)卡動態(tài)更改css樣式的方法
- AngularJS標(biāo)簽頁tab選項(xiàng)卡切換功能經(jīng)典實(shí)例詳解
- js實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- AngularJS實(shí)現(xiàn)tab選項(xiàng)卡的方法詳解
- 基于JS實(shí)現(xiàn)網(wǎng)頁中的選項(xiàng)卡(兩種方法)
- Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
- 使用vue.js寫一個tab選項(xiàng)卡效果
- js鼠標(biāo)經(jīng)過tab選項(xiàng)卡時實(shí)現(xiàn)切換延遲
- JS實(shí)現(xiàn)選項(xiàng)卡效果的代碼實(shí)例
相關(guān)文章
學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么
這篇文章主要介紹了學(xué)習(xí)JavaScript中的閉包c(diǎn)losure應(yīng)該注意什么?在?JavaScript?中,?每當(dāng)創(chuàng)建一個函數(shù),?閉包就會在函數(shù)創(chuàng)建的同時被創(chuàng)建出來,但是學(xué)習(xí)的時候我們應(yīng)該注意哪些問題呢,帶著疑問一起進(jìn)入下面文章學(xué)習(xí)具體內(nèi)容吧2022-06-06javascript設(shè)計模式 – 單例模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計模式 – 單例模式原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript單例模式原理、定義、應(yīng)用場景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04利用Keydown事件阻止用戶輸入實(shí)現(xiàn)代碼
這篇文章主要介紹了利用Keydown事件阻止用戶輸入的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03收集的比較全的automation服務(wù)器不能創(chuàng)建對象 異常原因和解決方法
對于出現(xiàn)automation服務(wù)器不能創(chuàng)建對象的問題,下面有幾種解決方法大家可以試試。2008-10-10