tab切换

在前端开发过程中，经常会遇到tab切换，以及鼠标滑动显示tab内容的情况，在这里总结一下。

1、鼠标点击tab切换

//tab切换
    $(".tab").eq(0).show();
    $(".nav ul li").click(function(){
        var num =$(".nav ul li").index(this);
        $(".tab").hide();
        $(".tab").eq(num).show();
        $(".nav ul li").eq(num).addClass("active").siblings().removeClass("active");
    })

a、首先先了解一下 jQuery 遍历 - eq() 方法

例子

$("body").find("div").eq(2).addClass("blue");
//w3c 通过index为2的div添加适当的类

.eq(index) 方法将匹配元素集缩减值指定 index 上的一个。

其中index整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。（请注意，index 是基于零的，并且是在 jQuery 对象中引用元素的位置，而不是在 DOM 树中。）

因此使用eq来进行定位使得整个逻辑变得更加清晰简单。

b、然后是 jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

例子

  $("h2").siblings("p");   //返回属于 <h2> 的同胞元素的所有 <p> 元素：

了解这些，逻辑就非常清晰了。先隐藏所有tab，显示第一个，获取鼠标点击的元素的index，显示index指示位置的元素，清除其他同胞元素的样式，再显示选中样式。

2、mouseover

鼠标经过跟点击逻辑一样，只需把click改成mouseover。

//tab切换
    $(".tab").eq(0).show();
    $(".nav ul li").mouseover(function(){
        var num =$(".nav ul li").index(this);
        $(".tab").hide();
        $(".tab").eq(num).show();
        $(".nav ul li").eq(num).addClass("active").siblings().removeClass("active");
    })