选项卡模板

最新推荐文章于 2024-10-12 11:30:07 发布

久梦辉辰

最新推荐文章于 2024-10-12 11:30:07 发布

阅读量69

点赞数

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

本文链接：https://blog.csdn.net/qinhanxu/article/details/130528103

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="warper">
        <ul>
            <li class="xiaoguo">第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
        </ul>
        <div class="text">
            <div class="xianshi">
                <h1>这是第一张</h1>
            </div>
            <div>
                <h1>这是第二张</h1>
            </div>
            <div>
                <h1>这是第三张</h1>
            </div>
            <div>
                <h1>这是第四张</h1>
            </div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>

</html>

CSS部分

*{
    padding: 0;
    margin: 0;
}
.warper{
    border: 1px solid #0f0f;
    width: 500px;
    margin: 20px auto;
}
ul{
    display: flex;
}
ul>li{
    list-style: none;
    padding: 20px;
    background-color: rgb(131, 131, 131);
    width: 125px;    
    text-align: center;
}
.text>div{
    height: 200px;
    border: 1px solid #666;
    background-color:aquamarine ;
    display: none;
}
.text>.xianshi{
    display: block;
}
.xiaoguo{
    color: aliceblue;
    background-color: blueviolet;
}

js部分

var nav = document.querySelectorAll("ul>li");
var text = document.querySelectorAll(".text>div");
 for(var i =0; i<nav.length;i++){
    nav[i].index = i;
    nav[i].addEventListener("click",function(){
        console.log(this.index);
        for(var j = 0;j<nav.length;j++){
            nav[j].classList.remove("xiaoguo");
            text[j].classList.remove("xianshi");
        }
        this.className = "xiaoguo"
        text[this.index].className = "xianshi"
    })
 }