一聚教程网:一个值得你收藏的教程网站

热门教程

jQuery如何实现套选项卡功能 jQuery实现套选项卡功能代码示例

时间:2022-06-29 02:15:50 编辑:袖梨 来源:一聚教程网

jQuery如何实现套选项卡功能?本篇文章小编给大家分享一下jQuery实现套选项卡功能代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

知识点总结:

1.siblings():兄弟元素,获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

2.removeClass():方法从被选元素移除一个或多个类。

3.addClass():方法向被选元素添加一个或多个类。

4.eq():方法将匹配元素集缩减值指定 index 上的一个。

5.hide()和show():隐藏和显示特效。

6.parent():获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。

7.find():方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

8.index():方法返回指定元素相对于其他指定元素的 index 位置。

一、html

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
<div id="div1">
 <input class="active" type="button" value="tab1">
    <input type="button" value="tab2">
    <input type="button" value="tab3">
    <input type="button" value="tab4">
    <input type="button" value="tab5">
</div>
<div class="box1" style="display:block;">
 <div class="box2" style="display:block;">
     tab1-1
    </div>
    <div class="box2">
     tab1-2
    </div>
    <div class="box2">
     tab1-3
    </div>
    <input class="active" type="button" value="tab1-1">
    <input type="button" value="tab1-2">
    <input type="button" value="tab1-3">
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     tab2-1
    </div>
    <div class="box2">
     tab2-2
    </div>
    <div class="box2">
     tab2-3
    </div>
    <input class="active" type="button" value="tab2-1">
    <input type="button" value="tab2-2">
    <input type="button" value="tab2-3">
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     tab3-1
    </div>
    <div class="box2">
     tab3-2
    </div>
    <div class="box2">
     tab3-3
    </div>
    <input class="active" type="button" value="tab3-1">
    <input type="button" value="tab3-2">
    <input type="button" value="tab3-3">
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     tab4-1
    </div>
    <div class="box2">
     tab4-2
    </div>
    <div class="box2">
     tab4-3
    </div>
    <input class="active" type="button" value="tab4-1">
    <input type="button" value="tab4-2">
    <input type="button" value="tab4-3">
</div>
<div class="box1">
 <div class="box2" style="display:block;">
     tab5-1
    </div>
    <div class="box2">
     tab5-2
    </div>
    <div class="box2">
     tab5-3
    </div>
    <input class="active" type="button" value="tab5-1">
    <input type="button" value="tab5-2">
    <input type="button" value="tab5-3">
</div>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"90acb6228ec510fa","version":"2025.1.0","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"09a15e901f154c8c900d5950c76ccb92","b":1}" crossorigin="anonymous"></script>

二、jQquery

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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<script src="js/js.js"></script>
    <script>
        $('#div1>:button').on('click', function(){
            $(this).addClass('active').siblings().removeClass('active');
  
            // 被点击的按钮在红色按钮中的下标
            let i = $(this).index();
            $('.box1').eq(i).show().siblings('.box1').hide();
  
        });
  
        $('.box1>:button').on('click',function(){
            $(this).addClass('active').siblings('input').removeClass('active');
            // 被点击按钮在同辈的3个input的下标
            let i = $(this).parent().find('input').index(this);
            $(this).parent().find('div').eq(i).show().siblings('div').hide();
        })
</pre>
<p>
    执行结果:
</p>
<p align="center">
    <a href="https://img.111cn.net/uploads/20220926/img_63318e897e02b30.jpg" class="js-smartPhoto-pc" target="_blank"><img alt="" src="https://img.111cn.net/uploads/20220926/img_63318e897e02b30.jpg" /></a>
</p>                   
 
 
                    <div class="articles">
                        <div class="tit02">
                            <h4>相关文章</h4>
                        </div>
                        <ul>
                                                                                                <li>
                                        <a target="_blank" href="/new/425004.htm">《1号会员店》关闭自动续费方法</a>
                                        <span>01-29</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/425003.htm">《排球少年:新的征程》社团每日福利领取方法</a>
                                        <span>01-29</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/425002.htm">《椿之歌》新手风属性队伍推荐</a>
                                        <span>01-29</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/425001.htm">《最终幻想14:水晶世界》小小阿托莫斯宠物获得方法</a>
                                        <span>01-29</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/425000.htm">《燕云十六声》醉拳客打法攻略</a>
                                        <span>01-29</span>
                                    </li>
                                                                    <li>
                                        <a target="_blank" href="/new/424999.htm">《异人之下》全货币获取方法汇总</a>
                                        <span>01-29</span>
                                    </li>
                                                                                    </ul>
                    </div>
                </div>
 
 
                <div class="pages art-detail">
 
                </div>
 
 
 
 
 
 
 
 
 
 
 
 
            </div>
        </div>
    </div>
</div>
 
<div class="hot-column">
    <div class="cont">
        <div class="tit">
            <h4>热门栏目</h4>
        </div>
        <ul class="clearfix">
            <li>
                <h6><a href="/list-1/" target="_blank">php教程</a></h6>
                <a href="/list-45/" target="_blank">php入门</a>
                <a href="/list-46/" target="_blank">php安全</a>
                <a href="/list-47/" target="_blank">php安装</a>
                <a href="/list-48/" target="_blank">php常用代码</a>
                <a href="/list-49/" target="_blank">php高级应用</a>
            </li>
            <li>
                <h6><a href="/list-2/" target="_blank">asp.net教程</a></h6>
                <a href="/list-78/" target="_blank">基础入门</a>
                <a href="/list-79/" target="_blank">.Net开发</a>
                <a href="/list-80/" target="_blank">C语言</a>
                <a href="/list-81/" target="_blank">VB.Net语言</a>
                <a href="/list-82/" target="_blank">WebService</a>
            </li>
            <li>
                <h6><a href="/list-6/" target="_blank">手机开发</a></h6>
                <a href="/list-208/" target="_blank">安卓教程</a>
                <a href="/list-209/" target="_blank">ios7教程</a>
                <a href="/list-210/" target="_blank">Windows Phone</a>
                <a href="/list-211/" target="_blank">Windows Mobile</a>
                <a href="/list-212/" target="_blank">手机常见问题</a>
            </li>
            <li>
                <h6><a href="/list-3/" target="_blank">css教程</a></h6>
                <a href="/list-99/" target="_blank">CSS入门</a>
                <a href="/list-100/" target="_blank">常用代码</a>
                <a href="/list-101/" target="_blank">经典案例</a>
                <a href="/list-102/" target="_blank">样式布局</a>
                <a href="/list-103/" target="_blank">高级应用</a>
            </li>
            <li>
                <h6><a href="/list-4/" target="_blank">网页制作</a></h6>
                <a href="/list-136/" target="_blank">设计基础</a>
                <a href="/list-137/" target="_blank">Dreamweaver</a>
                <a href="/list-138/" target="_blank">Frontpage</a>
                <a href="/list-139/" target="_blank">js教程</a>
                <a href="/list-140/" target="_blank">XNL/XSLT</a>
            </li>
            <li>
                <h6><a href="/list-7/" target="_blank">办公数码</a></h6>
                <a href="/list-236/" target="_blank">word</a>
                <a href="/list-237/" target="_blank">excel</a>
                <a href="/list-238/" target="_blank">powerpoint</a>
                <a href="/list-239/" target="_blank">金山WPS</a>
                <a href="/list-240/" target="_blank">电脑新手</a>
            </li>
            <li>
                <h6><a href="/list-11/" target="_blank">jsp教程</a></h6>
                <a href="/list-68/" target="_blank">Application与Applet</a>
                <a href="/list-69/" target="_blank">J2EE/EJB/服务器</a>
                <a href="/list-70/" target="_blank">J2ME开发</a>
                <a href="/list-71/" target="_blank">Java基础</a>
                <a href="/list-72/" target="_blank">Java技巧及代码</a>
            </li>
        </ul>
    </div>
</div>
 
<div class="footer">
    <div class="cont">
        <p>
            <a href="/" target="_self">一聚教程网</a>|
            <a href="javascript:;" class="about" target="_self">关于我们</a>|
            <a href="javascript:;" class="contact" target="_self">联系我们</a>|
            <a href="javascript:;" class="gg_contact" target="_self">广告合作</a>|
            <a href="javascript:;" class="friend_link" target="_self">友情链接</a>|
            <a href="javascript:;" class="copyright_notice" target="_self">版权声明</a>
        </p>
        <p>
            <span>copyRight@2007-2022 www.111CN.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian"></a></span>
        </p>
        <p>
            <span>
                网站内容来自网络整理或网友投稿如有侵权行为请邮件:111cn.com@163.com 我们24小时内处理
            </span>
        </p>
    </div>
</div>
<script>
    var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"};
</script>
<script src="/jspc/func.js" type="text/javascript"></script>
<!-- Google tag (gtag.js) -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', 'G-DSRRGRV1TL');
</script>
 
 
<script src="/js/stat.js"></script>