html:
<section>
<nav >内容四</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");
});
});