原生js实现选项卡切换

最新推荐文章于 2023-01-05 15:00:37 发布

游手好闲的电子流浪汉

最新推荐文章于 2023-01-05 15:00:37 发布

阅读量214

点赞数

分类专栏： js 前端笔记

本文链接：https://blog.csdn.net/vxx_xx/article/details/119485888

版权

JavaScript DOM操作事件处理 CSS样式切换内容显示隐藏

关键词由CSDN通过智能技术生成

笔记同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

点击切换和鼠标滑过切换

<!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>
        .container {
            width: 400px;
            height: 300px;
            border: 10px solid #000;
            margin: 30px auto;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 40px;
            display: flex;
            line-height: 40px;
        }

        .header div {
            flex: 1;
            background-color: hotpink;
            text-align: center;
            font-size: 36px;
            color: white;
        }

        .header .active {
            background-color: orange;
        }

        .content {
            display: none;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="header">
            <div class="active" data-index="1">1</div>
            <div data-index="2">2</div>
            <div data-index="3">3</div>
        </div>
        <div class="body">
            <div class="content" style="display: block;">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>
    </div>
    <script>
        var headerDiv = document.querySelectorAll(".header div");
        var contents = document.querySelectorAll('.content');
        //点击切换
        // for (var i = 0; i < headerDiv.length; i++) {
        //     headerDiv[i].onclick = function () {
        //         for (var j = 0; j < headerDiv.length; j++) {
        //             headerDiv[j].className = '';
        //         }
        //         this.className = 'active';
        //         for (var j = 0; j < contents.length; j++) {
        //             contents[j].style.display = 'none';
        //         }
        //         var index = this.getAttribute('data-index');
        //         contents[index - 1].style.display = 'block';
        //     }
        // }
        //鼠标滑动切换
        for (var i = 0; i < headerDiv.length; i++) {
            headerDiv[i].onmouseover = function () {
                for (var j = 0; j < headerDiv.length; j++) {
                    headerDiv[j].className = '';
                }
                this.className = 'active';
                for (var j = 0; j < contents.length; j++) {
                    contents[j].style.display = 'none';
                }
                var index = this.getAttribute('data-index');
                contents[index - 1].style.display = 'block';
            }
        }
    </script>
</body>

</html>

效果：
在这里插入图片描述