纯原生实现选项卡

最新推荐文章于 2022-06-21 20:31:23 发布

小虎牙大萌眼睛

最新推荐文章于 2022-06-21 20:31:23 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/qq_38352648/article/details/80860837

版权

`//=>结构`

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <link rel="stylesheet" href="css/tab.css">
</head>
<body>
<div class="tabBox" id="tabBox">
    <ul>
        <li class="select tab">新闻</li>
        <li class="tab">面试</li>
        <li class="tab">总结</li>
    </ul>
    <div class="content select">今天没有新闻</div>
    <div class="content">面试被虐了，要巩固基础知识哦</div>
    <div class="content">自我总结很重要，要不就一直是前端小白了</div>
</div>
<script src="js/changeTab.js"></script>
</body>
</html>

//=>css

* {
    margin: 0;
    padding: 0;
    font-size: 14px;
    -webkit-user-select: none;
}

ul {
    list-style: none;
}

.tabBox {
    margin: 20px auto;
    width: 500px;
}

.tabBox ul {
    position: relative;
    top: 1px;
    overflow: hidden;
}

.tabBox ul li {
    float: left;
    margin-right: 10px;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #999;
    background: #CCC;
    cursor: pointer;
}

.tabBox ul li.select {
    background: #FFF;
    border-bottom-color: #FFF;
}

.tabBox div {
    display: none;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px solid #999;
}

.tabBox div.select {
    display: block;
}

//=>js

//=>第一种方法

原理：此处利用let形成的块儿级作用域，来存储每一个tab标签对应的点击事件，确保点击元素的时候调取自己对应的方法。

但是这就意味着有三个对应的存储空间，里面分别存储这个各自的事件已经对应的方法；

function tanPlugin(id, tabClass, conClass) {
    var box = document.getElementById(id);
    var tabList = box.getElementsByClassName(tabClass);
    var conList = box.getElementsByClassName(conClass);

    function tabChange(index) {
        for (var i = 0; i < tabList.length; i++) {
            tabList[i].className = tabClass;
            conList[i].className = conClass;
            tabList[index].className = tabClass + ' ' + 'select';
            conList[index].className = conClass + ' ' + 'select';
        }
    }

    for (let j = 0; j < tabList.length; j++) {
        tabList[j].onclick = function () {
            tabChange(j);
        }
    }



第二种方法

function tanPlugin(id, tabClass, conClass) {
    var box = document.getElementById(id);
    var tabList = box.getElementsByClassName(tabClass);
    var conList = box.getElementsByClassName(conClass);

    function tabChange(index) {
        for (var i = 0; i < tabList.length; i++) {
            tabList[i].className = tabClass;
            conList[i].className = conClass;
            tabList[index].className = tabClass + ' ' + 'select';
            conList[index].className = conClass + ' ' + 'select';
        }
    }

//=>第三种方法

/* 每个tabList[i]都有一个自定义的属性index；确保没有给一个tab元素都有一个自己的小仓库，来存贮i的值，即使当点击的时候i的为最后那一个元素，也不会影响我们的操作，因为我们已经把i的值存储在每个tab元素的index属性里面，此时利用事件的this始终指向被帮元素，我们就可以等到点击的时候取出对应的this.index,即为对应i的值 */ for (var i = 0; i < tabList.length; i++) { tabList[i].oindex=i; tabList[i].οnclick=function () { tabChange(this.oindex); } } } tanPlugin('tabBox', 'tab', 'content');

 function tabChange(index) {
        for (var i = 0; i < tabList.length; i++) {
            tabList[i].className = tabClass;
            conList[i].className = conClass;
            tabList[index].className = tabClass + ' ' + 'select';
            conList[index].className = conClass + ' ' + 'select';
        }
    }

    /*
    * 此处利用的是闭包思想
    * 每循环一次都会形成一个不销毁的私有作用域，
    * 点击的元素可以找到自己唯一的i
    * */
    for (var i = 0; i < tabList.length; i++) {
      ~function(i){
          tabList[i].οnclick=function () {
              tabChange(i);
          }
      }(i);

    }

}
tanPlugin('tabBox', 'tab', 'content');