JQuery__Tab实践

时间:2022-04-28 16:25:25

刚开始学做网站的时候,是从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来写样式)

请各位老师指正!^_^