目前大部分的网站都有tab切换效果,就是导航有一行tab,点击后body内容也随着tab变化而变化。
实现的原理也是非常简单,就是根据导航的id值,显示对应内容块id,对兄弟结点进行隐藏就OK了,非常简单。
第一步:设置html结构
<ul>
<li class="list"></li>
<li class="list on"></li>
<li class="list"></li>
</ul>
<div id="div_1">我是div1<div>
<div id="div_2">我是div2<div>
<div id="div_3">我是div3<div>
第二步:设置js
<script>
var curIndex = " ";
var $list =$(".list");
var $content = $(".content");
$list.on('click',function(){
curIndex =$(this).index();
$(this).addClass("on").siblings().removeClass("on");//选中的导航显示,未选中的隐藏
$("#div_"+curIndex).show().siblings().hide();//根据选中导航的id来显示对应内容块,隐藏兄弟结点的内容块
})
</script>