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

});

});