jQuery实现TAB选项卡切换特效简单演示

最新推荐文章于 2023-08-10 18:55:59 发布
最新推荐文章于 2023-08-10 18:55:59 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： 前端发展

本文实例为大家分享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 >

以上就是本文的全部内容，希望对大家的学习有所帮助。

aaa333qwe
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端项目实践案例——制作Tab选项卡点击切换效果
shhghvvh的博客
11-23 3162
制作Tab选项卡点击切换效果
jQuery 动态选项卡，jquery Tab Control实例演示
05-12
内容索引:脚本资源,jQuery,Tab,选项卡,jQuery标签　　实用于jquery的TabControl类动态创建选项卡【标签】，实例中用TabControl类创建了两人个实用的TAB，并加注了丰富的注释，这里要注意一下，第2个tab测试两个之间的冲突，html中的div ID，TAB ID号，tab个数，宽度，高度要对应好，尤其是ID不能写错，否则会出错。
vue使用动态组件实现TAB切换效果
m0_61663332的博客
12-22 8750
vue移动端使用动态组件实现tab切换效果
jquery—实现能滚动的选项卡效果
weixin_30375427的博客
07-24 268
选项卡在网页中很常见，可以说是必备的一个元素了，网上其实也有很多案例讲解选项卡的做法，写这篇文章，就是记录下自己的写一个的实例效果图： html： css样式： 主要是滚动条的的样式设置width：100%；overflow-x: scroll;overflow-y: hidden;white-space: nowrap;这样滚动条就完成； JQ： 转载于:h...
滑动选项卡
djsknsns的博客
11-05 179
滑动选项卡JQ
jQuery实现Tab选项卡切换效果简单演示
10-23
向大家推荐了一个jQuery实现Tab选项卡切换效果的简单演示，感兴趣的小伙伴们可以参考一下
jQuery实现滚动切换的tab选项卡效果代码
11-24
本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码。分享给大家供大家参考。具体如下： 这里介绍的jquery tab选项卡滚动动态切换代码，似乎很个性的网页选项卡，没有边框的修饰，但十分简约大方，选项卡菜单目前...
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 700
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JQuery实现选项卡（ 附代码）
weixin_46726346的博客
08-14 2696
样式： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
jquery css3实现动态选项卡菜单切换效果
06-16
jquery css3实现动态选项卡菜单切换效果
JavaScript编程实现tab选项卡切换的效果+1
Purpleendurer@CSDN
04-11 2004
网页中的tab选项卡切换效果一般是使用和匹配来实现的。如果在中嵌套了，和的匹配关系可能就会被打乱，这样显示时就可能出现问题。
php选项卡切换,jQuery选项卡切换特效实现步骤
weixin_36231030的博客
03-10 244
这次给大家带来jQuery选项卡切换特效实现步骤，jQuery选项卡切换的注意事项有哪些，下面就是实战案例，一起来看一下。1、tab切换 onjQuery tab切换*{margin:0;padding:0;}.wrap{margin-left: 50px;margin-top: 50px;}/*清浮动---clearfix*/.clearfix {*zoom: 1;}.clearfix:afte...
tab选项卡切换效果
女神修炼日记
01-25 896
通常的tab选项卡有以下几种类型： 滑过切换点击切换延迟切换自动切换  写标签栏时，左右边框是1px,最外层有1像素边框时候，通常将内部的标签栏宽度设置为：最外层宽度+单边框，且使用绝对定位，向左移动单边框的距离，代码如下： .notice { width: 298px; height:98px; margin: 10px; border: 1px
几种项目中常用的tab选项卡切换
最新发布
qq_43766059的博客
08-10 2089
页面上方循环获取标签信息，超出屏幕宽度时可滑动，点击标签时，下方数据随标签切换，当前选中标签样式改变；页面下方可左右滑动切换，当前展示页面数据与上方标签相对应，要求当前页面高度根据获取数据列表长度改变，当前页面无数据时，按要求展示无数据提示。
前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度
chenchuang0128的博客
06-12 5715
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色。
jQuery制作tab选项卡
weixin_44886806的博客
05-18 1723
用jQuery来制作tab的选项卡。 说白了就是切换到别的选项，已简单的例子来说，先写出样式. CSS部分: <style> ul,li{ list-style: none; margin: 0; padding: 0; } .nav { width: 80%; line-height: 48px; background: #f6f8fa; overflow: hidden;
jquery实现Tab选项卡
helloWolrldApe的博客
03-31 330
jquery实现Tab选项卡 很多网站又需要Tab选项卡的需求，以下是代码实现，图片需要自备。 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src...
jquery实现tab选项卡切换
05-17
可以用以下代码实现基本的Tab选项卡切换： HTML代码： ``` <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值