JQuery__Tab实践

浏览数：15 / 时间：2015年06月09日

刚开始学做网站的时候，是从DIV+CSS开始的，那时候不明白“幻灯片”“二级导航”等，更不明白“动态网站”。后来，需要用到幻灯片banner的时候，老师没有仔细讲解JS，就说：从网站找来，会用就好！于是在接下来的两年后的今天，我都只是“会用”，从没有去研究过实现的原理，前几天去面试的时候，让我做个Tab，我硬是没有做出来(╰_╯)。所以回来以后痛定思痛，决定沉下心来好好锻炼，于是就有了这个博客。第一次写，请各位老师指点，不管是写博客还是学JS，我都是个新手，O(∩_∩)O哈哈~

<------以上废话可以跳过----->

思路：Tab包括两个部分：List & Content，在List中触发某事件（hover、click等），Content中对应的部分显示出来，其他隐藏。先把结构写出来：

<div class="tab">
    <ul class="list">
       <li class="on">1st</li>
       <li>2nd</li>
       <li>3rd</li>
   </ul>
   <!--<div class="content">-->
       <div class="block">1st content</div>
       <div class="hide">2nd content</div>
       <div class="hide">3rd content</div>
   <!--</div>-->
</div>

div.content被我取消掉了，主要是多余，写上去只是为了结构上更好区分。

在没有JS的情况下(考虑用户禁用JS)，针对第一个List给予对应的.on样式表示当前选中，对应的内容中，也给第一个.block样式display:block(其实可以不要，默认显示就好了);其他两个给予.hide样式display:none;

接下来，咱们开始写Jquery部分：

首先，针对List部分，鼠标移动到对应的<li>标签上，给该<li>标签加上.on样式，并且把跟他同一辈的<li>标签去掉.on样式；

$(document).ready(function(){

   $(".tab li").hover(function(){
  
       $(this).addClass("on").siblings().removeClass("on");       

   });

})

接下来，思考一下：选择第一个<li>就显示第一个<div>，选择第二个就显示对应的第二个<div>…………那么这之间就有一个关联的数值，只要获得该<li>的位置值，然后把这个值用来查找对应的<div>，找到后给该<div>添加.block样式，并且同辈的<div>添加.hide样式就好了；

那么，获取<li>的位置用什么方法呢？想了半天不知道-.-||，只好去查找文档了，很幸运，就是它：index();

来看一下index()的说明：

index([selector|element])

概述

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。具体请参考示例。

参数

index() V1.4

selector Selector V14

一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。

element Element V1.0

获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

那么，就下来就继续Jquery吧：

$(document).ready(function(){

   $(".tab>ul>li").hover(function(){

       var siteval = $(this).index();
  
       $(this).addClass("on").siblings().removeClass("on");  

       $(".tab>div").eq(siteval).removeClass("hide").siblings("div").addClass("hide");     

   });

})

Jquery的兼容性就不说了，找了chrome、ff、IE6试了下，没问题；

接下来，为了能让页面中多处调用，避免重复写代码，那就把这个东西写为一个函数，需要的时候实例化一个就好了；

$(document).ready(function(){
  
   function showTab(n){

       $(n+">ul>li").hover(function(){

           var siteval = $(this).index();
  
           $(this).addClass("on").siblings().removeClass("on");  

           $(n+">div").eq(siteval).removeClass("hide").siblings("div").addClass("hide");     

       });
   
   };
   
   showTab(".tab");
   showTab(".tabs");

})