选项卡（排他思想，自定义属性）

最新推荐文章于 2024-08-18 11:06:22 发布

幼儿崽

最新推荐文章于 2024-08-18 11:06:22 发布

阅读量44

点赞数

文章标签： html css css3 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73917034/article/details/129150052

版权

这是一个使用HTML、CSS和JavaScript实现的网页布局示例。通过点击导航栏的链接，可以显示和隐藏不同的内容区块，实现了颜色各异的背景动态切换效果。页面包含一个中央盒子区域和一个包含多个选项的导航栏，点击每个选项会高亮选中项并显示相应的内容区块。

摘要由CSDN通过智能技术生成

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }




    a {
        text-decoration: none;
        color: #333;
    }

    li {
        float: left;
        height: 50px;
        width: 120px;
        line-height: 50px;
        text-align: center;
        list-style: none;
        background: #bdb9b9;
    }

    .box {
        margin: 100px auto;
        width: 600px;
        height: 300px;
        background: rgb(222, 205, 238);
    }

    .a {
        position: absolute;
        top: 50px;
        left: 0;
        display: block;
        height: 250px;
        width: 600px;
        background: pink;
    }

    .b {
        position: absolute;
        top: 50px;
        left: 0;
        display: none;
        height: 250px;
        width: 600px;
        background: orange;
    }

    .c {
        position: absolute;
        top: 50px;
        left: 0;
        display: none;
        height: 250px;
        width: 600px;
        background: yellow;
    }


    .d {
        position: absolute;
        top: 50px;
        left: 0;
        display: none;
        height: 250px;
        width: 600px;
        background: green;
    }

    .e {
        position: absolute;
        top: 50px;
        left: 0;
        display: none;
        height: 250px;
        width: 600px;
        background: blue;
    }

    .dianjixiaoguo {
        background: red;
    }
    .dianjixiaoguo>a{
        color: white;
    }
    .nav>ul>li a {
        display: block;
    }

    .banner {
        position: relative;
    }
</style>




<body>
    <!-- box -->
    <div class="box">
        <!-- nav -->
        <div class="nav">
            <ul>
                <li class="hot"><a href="#">商品介绍</a> </li>
                <li><a href="#">规格与包装</a></li>
                <li><a href="#">售后保障</a></li>
                <li><a href="#">商品好评</a></li>
                <li><a href="#">本店好评商品</a></li>
            </ul>
        </div>
        <!-- banner -->
        <div class="banner">
            <div class="a">111</div>
            <div class="b">222</div>
            <div class="c">333</div>
            <div class="d">444</div>
            <div class="e">555</div>
        </div>
    </div>
    <script>
        var li = document.querySelectorAll('li');
        var banner = document.querySelector('.banner');
        var div = document.querySelectorAll('.banner>div')
        for (var i = 0; i < li.length; i++) {
            li[i].setAttribute('index', i)
            li[i].onclick = function () {
                for (var j = 0; j < li.length; j++) {
                    li[j].className = ''
                    div[j].style.display = 'none'
                }
                this.className = 'dianjixiaoguo'
                var num = this.getAttribute('index')
                div[num].style.display = 'block'
            }
        }
    </script>
</body>

</html>