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