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");
    })


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页