本文实例为大家分享jQuery实现TAB选项卡切换特效，供大家参考，具体内容如下

1、tab切换 on

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery tab切换</title>
  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    .wrap{
      margin-left: 50px;
      margin-top: 50px;
    }
    /*清浮动---clearfix*/
    .clearfix {
      *zoom: 1;
    }
    .clearfix:after {
      content: "";
      clear: both;
      display: block;
      height: 0;
      font-size: 0;
      visibility: hidden;
    }
    .blist {
      border:1px solid #d9d9d9;
      width: 275px;
      height: 32px;
    }
    .blist li:first-child{
      border-left: none;
    }
    .blist li{
       list-style: none;
       width: 68px;
       height: 32px;
       border-left:1px solid #d9d9d9;
       font-size: 14px;
       font-family: "楷体";
       line-height: 32px;
       text-align: center;
       float: left;
       /*鼠标样式改变为一个手*/
       cursor: pointer;
       /*字体免选中*/
       -webkit-user-select: none;
  
    }
    .blsit-list{
      width: 275px;
    }
    .blsit-list li{
       list-style: none;
       width: 275px;
       border:1px solid #ccc;
       height: 200px;
       border-top: none;
    }
    .wrap .blist li.active{
      font-weight: bold;
      color: red;
      border-top: 2px solid red;
      position: relative;
      top:-1px;
      height: 31px;
    }
    .blsit-list li:first-child{
      display: block;
    }
    .blsit-list li{
     display: none;
    }
  </style>
</head>
<body>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
       $(".blist").on("click","li",function(){
         // 设index为当前点击
         var index = $(this).index();
         // 点击添加样式利用siblings清除其他兄弟节点样式
         $(this).addClass("active").siblings().removeClass("active");
         // 同理显示与隐藏
         $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
       })
    })
    </script>
</body>
</html>

2、tab切换 mouseenter

效果图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery tab切换</title>
  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    .wrap{
      margin-left: 50px;
      margin-top: 50px;
    }
    /*清浮动---clearfix*/
    .clearfix {
      *zoom: 1;
    }
    .clearfix:after {
      content: "";
      clear: both;
      display: block;
      height: 0;
      font-size: 0;
      visibility: hidden;
    }
    .blist {
      border:1px solid #d9d9d9;
      width: 275px;
      height: 32px;
    }
    .blist li:first-child{
      border-left: none;
    }
    .blist li{
       list-style: none;
       width: 68px;
       height: 32px;
       border-left:1px solid #d9d9d9;
       font-size: 14px;
       font-family: "楷体";
       line-height: 32px;
       text-align: center;
       float: left;
       /*鼠标样式改变为一个手*/
       cursor: pointer;
       /*字体免选中*/
       -webkit-user-select: none;
  
    }
    .blsit-list{
      width: 275px;
    }
    .blsit-list li{
       list-style: none;
       width: 275px;
       border:1px solid #ccc;
       height: 200px;
       border-top: none;
    }
    .wrap .blist li.active{
      font-weight: bold;
      color: red;
      border-top: 2px solid red;
      position: relative;
      top:-1px;
      height: 31px;
    }
    .blsit-list li:first-child{
      display: block;
    }
    .blsit-list li{
     display: none;
    }
  </style>
</head>
<body>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <div class="wrap">
       <ul class="blist clearfix">
         <li class="active">电影</li>
         <li>电脑</li>
         <li>冰箱</li>
         <li>空调</li>
       </ul>
       <ul class="blsit-list">
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
       </ul>
    </div>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
       $(".blist li").on("mouseenter",function(){
         var index = $(this).index();
         $(this).addClass("active").siblings().removeClass("active");
         $(this).parents(".wrap").find(".blsit-list li").eq(index).show().siblings().hide();
       })
    })
    </script>
</body>
</html>

jQuery实现TAB选项卡切换特效简单演示的更多相关文章

  1. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  2. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  3. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  4. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  5. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  6. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  7. jquery叠加页片自动切换特效

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...

  8. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  9. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

随机推荐

  1. 【新人赛】阿里云恶意程序检测 -- 实践记录11.3 - n-gram模型调参

    主要工作 本周主要是跑了下n-gram模型,并调了下参数.大概看了几篇论文,有几个处理方法不错,准备下周代码实现一下. xgboost参数设置为: param = {'max_depth': 6, ' ...

  2. 拦截器——原理（AOP、责任链模式、配置）

    1.Struts2拦截器概述: (1)Struts2框架封装中封装了很多功能,这些功能其实都是封装在Struts2的拦截器里面,Struts2里面有很多拦截器,每次不是这些拦截器都执行,每次只执行默认 ...

  3. Email-发送邮件

    Email 发送邮件 import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIME ...

  4. 剑指offer-面试题19-正则表达式匹配-字符串

    /* 题目: 实现一个函数用来匹配包含'.'和'*'的正则表达式. '.'表示比配任意字符,‘*’表示匹配0个或多个字符串. */ /* 思路: 采用递归的方法. 基础条件:当字符串和模式串存在空的情 ...

  5. gulp常用插件之gulp-rev-css-url使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-css-url这是一款用于在gulp-rev之后覆盖js.css文件中的URL进行替换. 更多使用文档请点击访问gulp-rev ...

  6. 问题 E: Problem B

    #include <cstdio> #include <cstring> #include <algorithm> #include <vector> ...

  7. Docker 使用记录

    1.Docker 镜像加载本地镜像 2.Docker 创建镜像: 创建dockerfile 文件: 进入到文件目录下: 输入命令 docker build -t xxxx . 注意:后面的小点要有, ...

  8. 推荐7款用于PHP的代码调试工具，太有用了！

    当谈论到服务器端的脚本语言时,大多数人都会首先想到PHP.在你写完代码后,使用一些检查方面的工具是非常有必要的,无论是单纯的代码调试工具,还是测试优化工具.下面就为广大的PHP开发者介绍7个专为PHP ...

  9. 关于JavaScript的原型继承与原型链

    在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性 ...

  10. laravel本地化扩展包的下载使用

    1.下载扩展包 composer require caouecs/laravel-lang:~3.0 2.下载完成之后在根目录下的vendor中caouces\src下就是语言的扩展包 2.1我们复制 ...