tab切换

原创 2018年04月17日 11:10:57

在前端开发过程中,经常会遇到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");
    })


把图像文件上传到数据库,并从数据库读出

上传图片到数据库:using System;using System.Collections;using System.ComponentModel;using System.Data;using S...
  • wildhorse01
  • wildhorse01
  • 2002-06-26 09:23:00
  • 1047

QQTab切换特效(源码)

  • 2011年07月15日 10:32
  • 413KB
  • 下载

Android主流APP底部Tab效果制作

  • 2017年09月01日 17:41
  • 24.94MB
  • 下载

jQuery+css实现tab切换效果

  • 2018年01月09日 15:08
  • 36KB
  • 下载

126邮箱TAB切换页效果 126邮箱TAB切换页效果

  • 2010年04月22日 19:30
  • 19KB
  • 下载

jQuery实现简单的tab切换

html:          tab1      tab2      tab3      tab4              内容一      内容二      内容三   ...
  • u012637258
  • u012637258
  • 2017-10-08 11:32:03
  • 449

JS实现Tab切换,超简单只有几行代码

  • 2013年03月27日 11:00
  • 1KB
  • 下载

网页原型tab切换

  • 2013年04月27日 15:22
  • 53KB
  • 下载

tab切换,适用于多个tab切换

tab切换 * {     padding:0;     margin:0 } body {     font-size:12px } ul, li, ol {     list-style:no...
  • peidandan
  • peidandan
  • 2013-07-11 11:21:53
  • 6078

使用angularJs实现tab切换

最近的项目客户要求使用angularJs,不得不说angularJs用起来确实方便。但是有些功能事件不会的话还是会用jq。其实在使用angularJs的时候,能不用jq最后还是不用jq,以免混乱、冲突...
  • JaneLittle
  • JaneLittle
  • 2017-04-11 16:12:17
  • 3567
收藏助手
不良信息举报
您举报文章:tab切换
举报原因:
原因补充:

(最多只允许输入30个字)