封装了一个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>