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{
 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()
})
}