JavaScript-tab切换【基础】

原创于 2023-06-04 22:01:17 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

该HTML代码展示了如何使用CSS创建布局，并用JavaScript处理鼠标悬停事件来改变链接样式及显示隐藏内容。当用户将鼠标悬停在页面链接上时，对应的隐藏内容区域会显示，同时其他高亮样式会移除。

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .boxTop {
            margin: 20px auto;
            margin-bottom: 0;
            width: 400px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            list-style: none;
            border-bottom: 1px solid green;
        }
        a {
            text-decoration: none;
            color: #999;
        }
        .action {
            color: red;
        }
        .box1 {
            display: none;
            width: 400px;
            height: 200px;
            border: 1px solid green;
            margin: 5px auto;
        }
        .actionBox{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="boxTop">
            <li><a href="javascript:;" class="action">页面1</a></li>
            <li><a href="javascript:;">页面2</a></li>
            <li><a href="javascript:;">页面3</a></li>
            <li><a href="javascript:;">页面4</a></li>
        </ul>
        <div class="boxBottom">
            <div class="box1 actionBox">盒子1</div>
            <div class="box1">盒子2</div>
            <div class="box1">盒子3</div>
            <div class="box1">盒子4</div>
        </div>
    </div>
    <script>
        const pageNum = document.querySelectorAll('.boxTop a')
        for (let index = 0; index < pageNum.length; index++) {
            pageNum[index].addEventListener('mouseover',function(){
                // ※
                document.querySelector('.boxTop .action').classList.remove('action')
                this.classList.add('action')
                document.querySelector('.boxBottom .actionBox').classList.remove('actionBox')
                document.querySelector(`.boxBottom .box1:nth-child(${index + 1})`).classList.add('actionBox')
            })
        }
    </script>
</body>
</html>