js自定義Tab選項卡效果
自定義Tab選項卡,具體內(nèi)容如下
規(guī)范HTML格式
在設計選項卡之前,先規(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兩個。其他元素的樣式都是通過這兩個類一層一層往下找然后進行設置。
設計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標簽display設置成block后,長度超過了li,能夠覆蓋掉內(nèi)容面板的邊框形成空缺(經(jīng)過測試,li設置邊框之后和內(nèi)容面板的div邊框相距不足1px,也可以使用margin讓li和div重疊,然后用li覆蓋掉div的邊框)。
綁定JS代碼
(function($) { // 頁面加載后的工作 $("div.m-tab-container li a").on("click", function(e) { e.preventDefault(); // 可以在這里判斷被點擊的a標簽是否已經(jīng)激活 $(".active").removeClass("active"); $(this).closest("li").addClass("active") $($(this).attr("href")).addClass("active"); }) })(jQuery);
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript設計模式 – 單例模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 單例模式原理與應用,結合實例形式分析了javascript單例模式原理、定義、應用場景及相關操作注意事項,需要的朋友可以參考下2020-04-04收集的比較全的automation服務器不能創(chuàng)建對象 異常原因和解決方法
對于出現(xiàn)automation服務器不能創(chuàng)建對象的問題,下面有幾種解決方法大家可以試試。2008-10-10