实现tab切换js有好几种方法,但要写成可复用性高、简单的我认为是jq写的。以下是源码:
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(css根据你的UI大叔设计图决定)
*{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
$(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");
});
});