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


阅读更多
上一篇如何鼠标悬浮显示隐藏图片
想对作者说点什么? 我来说一句

QQTab切换特效(源码)

2011年07月15日 413KB 下载

Android主流APP底部Tab效果制作

2017年09月01日 24.94MB 下载

jQuery+css实现tab切换效果

2018年01月09日 36KB 下载

网页原型tab切换

2013年04月27日 53KB 下载

MFC小程序文件空格和TAB切换

2011年05月05日 9.02MB 下载

简洁的tab切换代码

2014年08月29日 2KB 下载

基于jQuery流畅的tab切换效果

2009年02月27日 36KB 下载

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

关闭
关闭