javaScript排他tab页

最新推荐文章于 2024-04-30 16:17:31 发布

bug_终结者_

最新推荐文章于 2024-04-30 16:17:31 发布

阅读量171

点赞数

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_44250329/article/details/125533659

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div id="tabContent">
    <div class="div" style="display:block">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
</div>

<script>
    var li = document.querySelectorAll("li");
    for (var i = 0; i < li.length; i++) {
        li[i].abc = i;
        // console.log(li[i].abc)
        li[i].onclick = function () {
            // console.log(this)
            var div = document.querySelectorAll('.div');

            //排他
            for (var j = 0; j < div.length; j++) {
                // console.log(div[j])
                li[j].className = ''
                div[j].style.display = 'none';
            }

            console.log(div[this.abc]);
            li[this.abc].className = 'ligthcolor';
            div[this.abc].style.display = 'block';

        }

    }

</script>