今天在写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