JQuery__Tab实践
刚开始学做网站的时候，是从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"); })
需要再用到tab的时候，就实例化一个就好了，比如：showTab(".tabs");
在选择子元素的时候使用了”A>B“的方式，听说这样遍历得少，性能好一些。
最后留下的问题：同一个页面两个结构完全相同的tab，无法共用，不然也不至于需要再次实例化甚至不用写成一个方法，并且样式类名不同，导致样式可能要多写(解决方法：单独用一个class或者id来写样式)
请各位老师指正！^_^
