JS实现TAB原理及效果

目前大部分的网站都有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>

转载于:https://www.cnblogs.com/wenchunlong/p/4482502.html