jQuery實現簡單的tab切換

html:

<section>
   <nav id="nav">
     <a class="on">tab1</a>
     <a>tab2</a>
     <a>tab3</a>
     <a>tab4</a>
   </nav>
   <div id="contentBox">
     <div class="box active">內容一</div>
     <div class="box">內容二</div>
     <div class="box">內容三</div>
     <div class="box">內容四</div>
   </div>
</section>

 

css:

*{box-sizing:border-box;}
#nav{height:50px;}
#nav a{display:block;height:50px;line-height:50px;padding:0 15px;font-size:18px;text-align:center;font-family: 'Microsoft YaHei';float:left;background- color:#e1e1e1;cursor:pointer;}
#nav a.on{border-bottom:2px solid #e60012;}
#contentBox{width:280px;height:100px;}
#contentBox .box{text-align:center;line-height:100px;font-size:24px;font-weight:blod;display:none;}
#contentBox .box.active{display:block;}

 

js:

//簡單jq tab   index從0開始
$(function(){
    $("#nav a").off("click").on("click",function(){
       var index = $(this).index();
       $(this).addClass("on").siblings().removeClass("on");
       $("#contentBox .box").eq(index).addClass("active").siblings().removeClass("active");
     });
  });