jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
相信选项卡切换是大家常用的效果
单独写一个选项卡切换很方便
但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱
<div class="bodyCenter"> <div class="nav"> <span class="on">新闻</span> <span>热点</span> <span>动态</span> </div> <div class="main"> <div class="boxModule active">这是一条新闻</div> <div class="boxModule">------这是一条热点------</div> <div class="boxModule">~~~这是一条动态~~~</div> </div> </div> <style> *{ margin: 0; padding: 0; } body{ background-color: #f6f6f6} .bodyCenter{ width: 600px; margin: 100px auto; } .nav{ overflow: hidden; } .nav span{ background-color: #fff; border: 1px solid #ccc; border-bottom: 0; border-radius: 6px 6px 0 0; float: left; padding: 10px 20px; margin: 0 10px; cursor: pointer; } .nav span.on{ background-color: #f6f6f6; } .main{ padding: 30px; background-color: #fff; border: 1px solid #ccc; border-radius: 6px; } .main .boxModule{ display: none;} .main .boxModule.active{ display: block;} </style>
正常单个的选项卡切换
$(".nav span").click(function () { let $index = $(this).index() $(this).addClass("on").siblings().removeClass("on") $(".main .boxModule").eq($index).show().siblings().hide() })
如果一个页面有多个选项卡效果那样只能复制粘贴然后修改参数
下面是我做的一个简单的封装,只要调用那个方法传入两个参数就好了
tabMethod(".nav span", ".main .boxModule") function tabMethod(tabNav, tabModule) { $(tabNav).click(function () { console.log('sadsa') let $index = $(this).index() $(this).addClass("on").siblings().removeClass("on") $(tabModule).eq($index).show().siblings().hide() }) }
因为是基于jquery写的、所以在使用的时候需要引入jquery
用的是jquery.min.js