js原生tab

最新推荐文章于 2023-10-09 08:54:55 发布

weixin_42439326

最新推荐文章于 2023-10-09 08:54:55 发布

阅读量76

点赞数

分类专栏： js 文章标签： html js css

本文链接：https://blog.csdn.net/weixin_42439326/article/details/99204226

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js原生tab 无废话,上代码

html

<ul id="tab">
        <li class="active">综合素质</li>
        <li>幼儿</li>
        <li>小学</li>
        <li>中学</li>
    </ul>
    <div id="tab-content">
        <div class="show">1111</div>
        <div>2222</div>
        <div>3333</div>
        <div>4444</div>
    </div>

css

<style>
     ul{
            background: #ff8d0a;
            padding:8px;
            margin:0 .6rem;
            display: flex;
            border-radius: 4px;
            list-style: none;
        }
        ul>li{
            width: 25%;
            padding:.3rem;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            text-align: center;
            color:#fff;
        }
        .active{
            background: #fff;
            color:#333;
        }
          .tab-content div{
            display: none;
        }
        .tab-content  .show{
            display: block;
        }
</style>

<script>
    var li=document.getElementsByTagName('li');
    var tabContent=document.getElementsById('tab-content');
    var content=tabContent.getElementsByTagName('div');
    for(var i=0;i<li.length;i++){
        //绑定索引值（新增一个自定义属性：index属性）
        li[i].index = i;
        li[i].onclick = function () {
            //1.点亮上面的盒子。   2.利用索引值显示下面的盒子。(排他思想)
            for(var j=0;j<li.length;j++){
                li[j].className = "";
                content[j].className = "";
            }
            this.className = "active";
            content[this.index].className = "show"; //【重要代码】
        }
    }
</script>