js-实现选项卡功能

最新推荐文章于 2024-01-24 12:19:34 发布

阿渡渡渡渡渡渡

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量159

点赞数

分类专栏： js-运动文章标签： javascript

本文链接：https://blog.csdn.net/qq_44867271/article/details/106239318

版权

js-运动专栏收录该内容

3 篇文章 0 订阅

订阅专栏

    <div class="wrapper">
        <button class="active">111</button>
        <button>222</button>
        <button>333</button>
        <div class="content" style="display: block;">1111</div>
        <div class="content">2222</div>
        <div class="content">3333</div>
    </div>
    <script>
    var btn = document.getElementsByTagName('button');
        var div = document.getElementsByClassName('content');
        for(var i = 0; i < btn.length; i ++) {
            (function (n) {
                btn[n].onclick = function(){
                    for (var j = 0; j < btn.length; j++) {
                        btn[j].className = "";
                        div[j].style.display = "none";
                    }
                    this.className = "active";
                    div[n].style.display = "block";
                }    
            }(i))
        }
    </script>