本文实例为大家分享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. selenium规避网站监测

    规避网站监测 ​ 现在不少大网站有对selenium采取了监测机制.比如正常情况下我们用浏览器访问淘宝等网站的window.navigator.webdriver的值为undefined.而使用sel ...

  2. awk数组学习2

    以下数据取自redis数据库中client list的结果, id= addr= fd= name= age= idle= flags=N db= sub= psub= multi=- qbuf= q ...

  3. 开学第一课Java考试

    package moguiba;import java.text.DecimalFormat;import java.util.Scanner;import moguiba.ScoreInformat ...

  4. tp5使用PHPexcel扩展导出excel表

    1,使用composer安装phpexcel包: composer require phpoffice/phpexcel 2,在控制器中创建方法: (1)使用PHPexcel扩展.代码如下 /** * ...

  5. 【PHP】使用PHP抓取Bing每日图像并为己所用

    Bing搜索的首页每天都会推送一张很漂亮的图片,把它保存下来,当做电脑桌面或是自己的网站背景图还不是美滋滋…… 今天的bing图片是这样的 既然要抓取这张图片,首先就得弄清这张图是从何而来的.经过对必 ...

  6. ISCC2018 Reverse & Pwn writeup

    Reference:L1B0 Re RSA256 春秋欢乐赛原题..flag都不变的 给了三个加密文件和公钥证书public.key,可以使用openssl进行处理 $openssl rsa -pub ...

  7. Csla One or more properties are not registered for this type

    在实际运行中,好好运行的程序出现了以下问题: 2019-12-27 10:40:00,164 [DefaultQuartzScheduler_Worker-2] ERROR IBeam.BCPool. ...

  8. 2019-08-20 纪中NOIP模拟B组

    T1 [JZOJ3490] 旅游(travel) 题目描述 ztxz16如愿成为码农之后,整天的生活除了写程序还是写程序,十分苦逼.终于有一天,他意识到自己的生活太过平淡,于是决定外出旅游丰富阅历. ...

  9. [SNOI2017]炸弹[线段树优化建图]

    [SNOI2017]炸弹 线段树优化建图,然后跑一边tarjan把点全部缩起来,炸一次肯定是有连锁反应的所以整个连通块都一样-于是就可以发现有些是只有单向边的不能忘记更新,没了. #include & ...

  10. CTF之图片隐写术解题思路

    参考大佬的博客:https://blog.csdn.net/a_small_rabbit/article/details/79644078 深有感触,觉得写得比较全,因此将此篇文章记录在此方便以后用得 ...