刚开始学做网站的时候,是从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来写样式)
请各位老师指正!^_^