Jquery制作Tab选项卡菜单(转载)

转载原出处： http://blog.sina.com.cn/s/blog_850223a70100ti4l.html

 

jquery制作常见的网页tab选项卡菜单的两种方法及思路：

tab选项卡的常见html代码如下：（这几乎也是所有tab选项卡的基本结构）

<div id="tabBox">   <ul>     <li class="tabIn">科技</li>     //这里的第一个里运用了一个class类，让他区别于其他的li选项     <li>新闻</li> <li>体育</li> <li>财经</li> </ul> <div class="tabCont">科技对应的内容 </div>  //这里的第一个div内容也运用了一个class类，使之区别于其他的内容     <div>新闻对应的内容 </div>       <div>体育对应的内容 </div>         <div>财经对对应的内容 </div> </div>

tab菜单的效果是当鼠标移动到一个li选项卡时，对应的那个div的内容显示出来，而其他的内容是不可见的，所以关键就在于ul后面那个div的操作。第一种思路就是利用css的display属性，设置ul后面所有的div内容全部都是不可见的，只有当鼠标滑过相应的li时，它对应的div才出现。这个通过jquery实现

接下来我们利用css构建基本的样式：

<style> *{ margin:0; padding:0;} body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;} #tabBox { width:420px; margin:30px auto;   } #tabBox li{ float:left; width:100px; background:#ccc; color:#09F; height:30px; line-height:30px; text-align:center; cursor:pointer; margin-right:3px; font-weight:bold;} #tabBox li.tabIn{ background:#999;color:#F0F;} #tabBox div{ width:400px; padding: 15px 5px; color:#000;  height:135px; clear:left; display:none; background:#999;}//注意这里设置整个容器里的div为不可见的 #tabBox div.tabCont{ display:block;}   //注意这里设置只有具有tabCont的div内容才可见

</style>最后的效果如图：

 

 

 

 

 

 

 

 

 

 

 

接下来就是最重要的js部分

<script src="jquery-1.4.2.min.js"></script>  //首先引入jquery.js文件 <script>    //接下来是主体部分 $(function(){ $("#tabBox li").each(function (index){     //这行代码的意思是历便所有的li，让所有的li都触发一个函数，即下面的部分咯    $(this).mouseover(function(){     //数遍滑过哪一个li时，让当前的li都触发一个mouseover事件     $("li.tabIn").removeClass("tabIn");        //让本来具有tabIn的li的tabIn类移除    $(this).addClass("tabIn");           //给当的li增加一个tabIn类，让它背景以及样式区别于其他的li     $("#tabBox div.tabCont").removeClass("tabCont");   //让本来具有tabCont的div的tabCont类移除,也就是说让本来可见的div块不可见     $("#tabBox div").eq(index).addClass("tabCont")       //找到#tabBox框架里的div然后通过eq（）函数通过设置index值当前的div快，给他增加一个类tabCont（即让它可见）         })             })     

 })

</script> 

这个地方有几个点需要注意的：

（1）：不要忘记给先给所有的div设置一个display：none，让它们不可见

（2）：在jquery的主体代码中，最好是遵守“先移除样式，再给当前对象设置样式”的顺序。不然后果很严重。因为js代码在浏览器中是依次执行的。

如果不遵守这个顺序。我把代码改成这样：

$("#tabBox li").each(function (index){    $(this).mouseover(function(){     $(this).addClass("tabIn");                       //注意这里        $("li.tabIn").removeClass("tabIn");       //注意这里        $("#tabBox div.tabCont").removeClass("tabCont");     $("#tabBox div").eq(index).addClass("tabCont")          })           })      })

最后的效果是：当把鼠标移动到其他li上时：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 原因在于浏览器是这样解读代码的：

$("#tabBox li").each(function (index){             $(this).mouseover(function(){     $(this).addClass("tabIn");                  $("li.tabIn").removeClass("tabIn");                      $("#tabBox div.tabCont").removeClass("tabCont");     $("#tabBox div").eq(index).addClass("tabCont")                    }) })  })

1: 历遍所有的li，并给他们执行一个函数

2：鼠标划过时当前的li都执行一个mouseover事件

3：当前的li增加一个tabIn类。因为each在历遍li时从第一个开始，所以这里的this就是第一个li，this就指代了第一个li。而第一个li已经具备了tabIn类。这里出现了重叠

如果把div设置的代码顺序调换，而出现当把鼠标滑过第二个或其他的li时，下面对应的li不可见，出现下面的效果：

 

 

 

 

 

 

 

第二种方法：

利用jquery的show（）和hide（）方法对列表下面div块进行操作。

html代码：

<div id="tabBox">   <ul>     <li class="tabIn">科技</li>     //这里的第一个里运用了一个class类，让他区别于其他的li选项     <li>新闻</li>     <li>体育</li>     <li>财经</li>   </ul>   <div class="tabCont">科技对应的内容 </div>  //这里的第一个div内容也运用了一个class类，使之区别于其他的内容     <div>新闻对应的内容 </div>       <div>体育对应的内容 </div>         <div>财经对对应的内容 </div> </div>

css代码不变：

js代码：

<script src="jquery-1.4.2.min.js"></script>  //首先引入jquery.js文件 <script>    //接下来是主体部分 $(function (){

menu_li.mouseover(function(){  $(this).addClass("tabIn").siblings().removeClass("tabIn"); //给当前的li增加一个tabIn类，同时让它所有的同级的li不显示  var index=menu_li.index(this);     //定义一个变量，获取每次鼠标滑过时候对应的li的索引值；  $("#tabBox>div").eq(index).show().siblings().hide(); //找到tabBox下的div，获取相应的索引值，然后然后显示出来，同时让它所有的同级的div不显示                 })  }) 做到这里，貌似可以了，但是当我们把鼠标滑动到任意一个li上时，会出现如图的效果：

 

 

 

 

 

 

 

 

 

 

 

 

那么问题出在哪里？？？ 

    我通过邮件询问了《锋利的jquery》作者单东林先生。他给我的答复是：

$("#tabBox div").eq(index).show().siblings().hide(); id 为tabbox 里的第index个div显示，同时将它的同级元素隐藏。 因为你的选项卡ul和 div 是同级元素，所以会被隐藏，你可以通过增加div方法来解决这个问题

这个时候才豁然开朗。

所有这里必须要改变一下html结构：

<div id="tabBox">   <ul>     <li class="tabIn">科技</li>     <li>新闻</li>     <li>体育</li>     <li>财经</li>   </ul>   <div id="kk">      //这里嵌套了一个父层div   <div class="tabCont">科技对应的内容 </div>     <div>新闻对应的内容 </div>       <div>体育对应的内容 </div>         <div>财经对对应的内容 </div>     </div> </div>

css代码：

<style> *{ margin:0; padding:0;} body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;} #tabBox { width:420px; margin:30px auto;   } #tabBox li{ float:left; width:100px; background:#ccc; color:#09F; height:30px; line-height:30px; text-align:center; cursor:pointer; margin-right:3px; font-weight:bold;} #tabBox li.tabIn{ background:#999;color:#F0F;} #kk{width:430px;  color:#fff;  height:135px; overflow:hidden;} #kk div{display:none; background:#999; height:135px;width:400px;padding: 15px 5px;} #kk div.tabCont{ display:block;}

</style>

js代码：

<script src="jquery-1.4.2.min.js"></script> <script> $(function(){ var menu_li=$("#tabBox li"); menu_li.mouseover(function(){         $(this).addClass("tabIn").siblings().removeClass("tabIn");  var index=menu_li.index(this);  $("#kk>div").eq(index).show().siblings().hide();           })  })