w3h5

封装了一个tab切换插件

featured-tabs.png 封装了一个tab切换插件 HTML笔记

今天在写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://www.w3h5.com/post/273.html

赞 (0)
分享到: +More |

评论 沙发

换个身份