tab栏切换制作，点击导航栏切换内容html+css+js完整代码及详细解析

最新推荐文章于 2025-11-14 12:30:37 发布

原创最新推荐文章于 2025-11-14 12:30:37 发布 · 7.7k 阅读

62 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript #前端 #html5 #开发语言 #职场和发展

tab栏切换制作，点击导航栏切换内容

代码的详细解析：

首先定义了一个包含导航栏和内容区域的HTML结构。导航栏使用ul元素，每个导航项使用li元素。内容区域使用一个具有.main类名的div元素，其中包含多个具有.item类名的div元素。
使用CSS样式对导航栏和内容进行了样式设置。导航栏具有一个背景颜色，并且每个导航项平均分配宽度。当鼠标悬停在导航项上时，会改变背景颜色。内容区域的文本使用不同的字体和样式进行了显示。
在JavaScript代码中，首先使用document.querySelectorAll方法获取所有的导航项(lis)和内容项(items)。
使用setAttribute方法为每个导航项添加了一个自定义属性index，并设置为当前项的索引。
为每个导航项添加了一个点击事件监听器(onclick)。当导航项被点击时，执行相应的函数。
在点击事件处理函数中，首先移除所有导航项的类名，然后将当前点击的导航项添加类名color，以显示选中状态。

获取点击导航项的索引，通过设置对应索引的内容项的style.display属性为block，以显示对应的内容。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            background-color: aquamarine;
            width: 80%;
            height: 8vmin;
            margin: 10vmin auto;
            /* display: table; */
            display: flex;
        }

        li {
            /* display: table-cell; */
            line-height: 8vmin;
            text-align: center;
            display: inline-block;
            width: 20%;
        }

        li:hover {
            background-color: orangered;
        }

        .color {
            background-color: red;
        }
        .item{
            /* font-family: "华文新魏"; */
            font-size: 4em;
            font-family: "华文行楷"
        }
        .small{
            font-family: "华文行楷";
            font-size: 4em;
        }
        .main div{
            width: 80%;
            height: 100px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <ul>
        <li class="color">企业简介</li>
        <li>企业动态</li>
        <li>产品展示</li>
        <li>成功案例</li>
        <li>行业资讯</li>
    </ul>
    <div class="main">
        <div class="item" style="display: block;">
            鲜衣怒马少年郎，对镜自怜夜不眠
        </div>
        <div class="item" style="display: none;">
            我与春风携过客，你携秋水揽星河
        </div>
        <div class="item" style="display: none;">
            远赴人间惊鸿宴，一睹人间盛世颜
        </div>
        <div class="item" style="display: none;">
            少年曾许凌云志，取得人间第一流
        </div>
        <div class="item" style="display: none;">
            别人笑我太疯颠，我笑他人看不穿
        </div>
        <!-- <div class="small">
            青天有月来几时，我今停杯一问之
        </div> -->
    </div>
    <script>
        var lis = document.querySelectorAll('li')
        var items = document.querySelectorAll('.item')
        for (i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i)
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                this.className = 'color'
                var index = this.getAttribute('index')
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
                }
                items[index].style.display = 'block'
            }
        }
    </script>
</body>

</html>