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> |