TAB切换两种方法

最新推荐文章于 2022-02-06 20:41:05 发布

xu_chenpeng

最新推荐文章于 2022-02-06 20:41:05 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： javascript css

本文链接：https://blog.csdn.net/xu_chenpeng/article/details/111183362

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

展示一下 tab切换。

// css/html
<body>
<div class="big_div">
        <ul id="ul">
            <li class="cssActive">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>   
        <div class="right_div" id="right_div">
            <div class="active"><h1>1</h1></div>
            <div><h1>2</h1></div>
            <div><h1>3</h1></div>
            <div><h1>4</h1></div>
        </div>     
    </div>
</body>


css:
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .big_div{
        width: 100%;
        height: 100vh;
        display: flex;
        background: aquamarine;
    }
    li{
        width: 300px;
        height: 60px;
        line-height: 60px;
        background: cadetblue;
        border: 1px solid black;
        text-align: center;
        font-size: 35px;
        cursor: pointer;
    }
    .right_div{
        flex: 1;    
    }
    .right_div>div{
        display: none;
    }
    .right_div .active{
        display: block;
    }
    .cssActive{
        background: chartreuse;
    }
</style>

// removeAttribute,setAttribute方法
var lis = document.getElementById("ul").children;
        var divs = document.getElementById("right_div").children;

        for(let i=0 ; i<lis.length ; i++){
            lis[i].onclick = function(){
                for(let j=0 ; j<lis.length ; j++){
                    lis[j].removeAttribute("class");
                    divs[j].style.display = "none"
                }
            lis[i].setAttribute("class","cssActive")
            divs[i].style.display = "block";
            }
        }
//classList方法
var lis = document.getElementById("ul").children;
        var divs = document.getElementById("right_div").children;

        for(let i=0 ; i<lis.length ; i++){
            lis[i].onclick = function(){
                for(let j=0 ; j<lis.length ; j++){
                    lis[j].classList.remove("cssActive");
                    divs[j].style.display = "none"
                }
            lis[i].classList.add("class","cssActive")
            divs[i].style.display = "block";
            }
        }