jQuery实现选项卡功能（两种方法）

时间：2021-05-26

效果图：

代码如下：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <title>JQuery 源码分析</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} *{margin: 0;padding: 0;} .tab:after{content: '';display: block;clear: both;} .tab li{width: 150px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;list-style: none;float: left;margin: 0 10px;background: #ABCDEF;border-radius: 5px;} .tab li.active{background: #000;color:#fff;} .content:after{content: '';display: block;clear: both;} .content li{width: 460px;height: 300px;padding:20px;background: #f7f7f7;display: none;} </style> </head> <body> <div id="div1"> <input class="active" type="button" value="1" /> <input type="button" value="2"/> <input type="button" value="3"/> <div style="display: block;">11111111111</div> <div>22222222222</div> <div>333333333333</div> </div> <ul class="tab"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <ul class="content"> <li style="display: block;">111111111111</li> <li>222222222222</li> <li>333333333333</li> </ul> <script> $(function(){ //jQuery 方法一 $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class',''); $('#div1').find('div').css('display','none') $(this).attr('class','active'); $('#div1').find('div').eq($(this).index()).css('display','block'); }); //jQuery 方法二 $('.tab').find('li').click(function(){ var index = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $('.content').find('li').eq(index).show().siblings().hide(); }) }) </script> </body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章