自定義Tab選項卡，具體內容如下

規范HTML格式

在設計選項卡之前，先規范一下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，能夠覆蓋掉內容面板的邊框形成空缺（經過測試，li設置邊框之后和內容面板的div邊框相距不足1px，也可以使用margin讓li和div重疊，然后用li覆蓋掉div的邊框）。

綁定JS代碼

(function($) { // 頁面加載后的工作 $("div.m-tab-container li a").on("click", function(e) {  e.preventDefault();  // 可以在這里判斷被點擊的a標簽是否已經激活     $(".active").removeClass("active");  $(this).closest("li").addClass("active")  $($(this).attr("href")).addClass("active"); })})(jQuery);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。