封装了一个tab切换插件
今天在写tab切换的时候，顺便封装了一个，方便以后使用。
只需要填入 tab 和切换内容的父元素，即可实现。
自动给 tab 添加/删除 class 类 .on ，给切换的内容添加/删除 class 类 .active ，可以根据自己的需求设置样式。
HTML：
<ul id="tab">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="inner">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>JS：
<script>
function tabClick(tab,inner) {
for (var i = 0; i < tab.length; i++) {
tab[i].index=i;
tab[i].onclick = function () {
for (var m = 0; m < tab.length; m++) {
tab[m].index=m;
inner[m].index=m;
tab[m].classList.remove("on");
inner[m].classList.remove("active");
}
console.log(this.index);
this.classList.add("on");
inner[this.index].classList.add("active");
}
}
}
var tab = document.getElementById("tab").children,inner = document.getElementById("inner").children;
tabClick(tab,inner);
</script>CSS：
<style>
#inner li{
display: none;
}
#inner li.active{
display: block;
}
</style>声明：本文由w3h5原创，转载请注明出处：《封装了一个tab切换插件》 https://cloud.tencent.com/developer/article/1537998
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读