js自定义Tab选项卡效果

<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{  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;}

(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);