选项卡案例

最新推荐文章于 2023-01-16 19:17:52 发布

zhou_nj

最新推荐文章于 2023-01-16 19:17:52 发布

阅读量117

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zhou_nj/article/details/120246870

版权

本文详细介绍了如何通过JavaScript为HTML中的选项卡元素添加点击事件，实现不同选项卡的高亮切换和对应内容的显示隐藏。代码展示了如何获取选项卡和内容列表，然后为每个选项卡绑定点击事件，管理其高亮状态和内容的显示状态。

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

1.给所有的选项卡注册点击事件，在点击事件里面，切换选项卡的高亮和切换显示的内容。代码如下：


<!DOCTYPE html>
<html>
<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>选项卡</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .box{
            margin: 20px;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .tab{
            padding: 10px;
        }
        .tab li{
            padding: 5px 10px;
            border: 1px solid #ccc;
            margin: 0 5px;
            cursor: pointer;
            font-size: 14px;
        }
        .tab li.active{
            background-color: orangered;
            color: white;
        }
        .content{
            padding:0 10px;
        }
        .content li{
            font-size: 14px;
            display: none;
        }
        .content li.show{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="tab flex">
            <li class="active">保时捷</li>
            <li>奔驰</li>
            <li>宝马</li>
            <li>奥迪</li>
            <li>大众</li>
        </ul>
        <ul class="content">
            <li class="show">保时捷汽车的速度飞快</li>
            <li>奔驰汽车的内饰好看</li>
            <li>宝马汽车的操控性好</li>
            <li>奥迪汽车的灯效酷炫</li>
            <li>大众汽车的性价比高</li>
        </ul>
    </div>
    <script>
        // 01.获取所有的选项卡li
        let tabs = document.querySelectorAll('.tab li')
        // 02.获取所有的内容li
        let contents = document.querySelectorAll('.content li')
        // 03.给所有的选项卡li注册点击事件
        // 在点击事件里面，切换选项卡的高度和切换显示的内容
        tabs.forEach((tab,index)=>{
            tab.onclick = function(){
                // 先找到当前的高亮li，将高亮样式移除
                document.querySelector('.tab li.active').classList.remove('active')
                // 给点击的li，添加高亮效果
                this.classList.add('active')

                // 隐藏之前显示的内容
                document.querySelector('.content li.show').classList.remove('show')
                // 显示当前高亮li对应的内容
                contents[index].classList.add('show')
            }
        })
    </script>
</body>
</html>