JS实现div选单，颜色内容发生改变

本文链接：https://blog.csdn.net/m0_61235733/article/details/141021182

要求：鼠标悬浮改变颜色和内容；移除鼠标颜色和内容也不变回来，只有移动到其他 “非小说” “小说”等div选单时，颜色内容才发生改变

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

原码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>--鼠标悬停切换不同内容--</title>

    <style type="text/css">
        #main{
            width: 300px;
            height: 320px;
            border: 1px solid #E3E4E5;
            border-radius: 5%;
        }
        #top{
            width: 300px;
            height: 60px;
            /* border: 1px solid blue; */
        }
        #menu{
            width: 300px;
            height: 50px;
            /* border: 1px solid blue; */
        }
        .menu1{
            width: 90px;
            height: 50px;
            background: grey;
            position: relative;
            float: left;
            margin-left: 5px;
            display: flex;
            /* align-items: center;使垂直方向居中 */
            align-items: center;
            /* justify-content: center;使水平方向居中。 */
            justify-content: center;
        }
        .menu1:hover {
            background-color: aquamarine;
        }
        .wz{
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            color: white;
        }
        #bottom{
            width: 300px;
            height: 210px;
            /* border: 1px solid #E3E4E5 */
            
        }
        .bottom-wz{
            font-size: 16px;
            color: rgb(40, 98, 185);
            text-align: center;
            display: none;
        }
        .active{
            display: block;
        }
        .selected {
            background-color: aquamarine;
        }    
        </style>
</head>
<body>
    <div id="main">
        <div id="top">
            <span>
               <span style="font-weight: bold; color: burlywood;">图书周排行榜 TOP 100</span><br>
               <span style="font-size: 12px; color: burlywood;">近7天销量，每日更新</span>
            </span>
        </div>
        <div id="menu">
            <div class="menu1" data-target="bottom1">
                <span class="wz">小说</span>
            </div>
            <div class="menu1" data-target="bottom2">
                <span class="wz">非小说</span>
            </div>
            <div class="menu1" data-target="bottom3">
                <span class="wz">少儿</span>
            </div>
        </div>
        <div id="bottom">
            <div id="bottom1" class="bottom-wz">
                <span>
                    <span>1.斯凯瑞金色童书</span><br>
                    <span>2.哈利波特与”混血</span><br>
                    <span>3.不一样的卡梅拉</span><br>
                    <span>4.它们是怎么来的</span><br>
                    <span>5.五·三班的坏小子</span><br>
                    <span>6.男生日记</span><br>
                    <span>7.哈利·波特与魔法石</span><br>
                    <span>8.里啪啦丛书</span>
                </span>
            </div>
            <div id="bottom2" class="bottom-wz">
                <span>
                    <span>1.不爱</span><br>
                    <span>2.请别</span><br>
                    <span>3.伤害</span><br>
                    <span>4.它们是怎么来的</span><br>
                    <span>5.五·三班的坏小子</span><br>
                    <span>6.男生日记</span><br>
                    <span>7.哈利·波特与魔法石</span><br>
                    <span>8.里啪啦丛书</span>
                </span>
            </div>
            <div id="bottom3" class="bottom-wz">
                <span>
                    <span>1.你叫</span><br>
                    <span>2.个蛋</span><br>
                    <span>3.想当</span><br>
                    <span>4.人机</span><br>
                    <span>5.五·三班的坏小子</span><br>
                    <span>6.男生日记</span><br>
                    <span>7.哈利·波特与魔法石</span><br>
                    <span>8.里啪啦丛书</span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/JavaScript">
        const menu1 = document.querySelectorAll(".menu1");
        const bottomWz = document.querySelectorAll(".bottom-wz");

        menu1.forEach(item => {
            item.addEventListener('mouseover', () => {
                // 隐藏所有内容
                bottomWz.forEach(bottom => bottom.classList.remove('active'));
                
                // 显示相应的内容
                const target = document.getElementById(item.dataset.target);
                target.classList.add('active');

                // 改变当前元素的背景色，恢复其他元素的背景色
                menu1.forEach(menu => menu.classList.remove('selected'));
                item.classList.add('selected');
            });
        });
    </script>

    
</body>
</html>

讲解

首先就是body里的，先要设置整体框架div，然后选中clss或者id属性在css中设置样式；（没什么讲的就是调样式）
效果实现是在JS中实现的，这个代码：

<script type="text/JavaScript">
        const menu1 = document.querySelectorAll(".menu1");
        const bottomWz = document.querySelectorAll(".bottom-wz");

        menu1.forEach(item => {
            item.addEventListener('mouseover', () => {
                // 隐藏所有内容
                bottomWz.forEach(bottom => bottom.classList.remove('active'));
                
                // 显示相应的内容
                const target = document.getElementById(item.dataset.target);
                target.classList.add('active');

                // 改变当前元素的背景色，恢复其他元素的背景色
                menu1.forEach(menu => menu.classList.remove('selected'));
                item.classList.add('selected');
            });
        });
    </script>

const声明接受到document.querySelectorAll方法搜索的带有.menu1样式的元素
然后操作所查找的元素，menu1 就是需要悬停时改变颜色并显示不同内容的元素，bottomWz 是需要显示的元素
forEach循环遍历，addEventListener(）添加事件；'mouseover’悬浮事件，就是鼠标悬浮到此div的操作
classList操作元素的class样式列表添加.active样式显示内容，移除.active样式隐藏内容

.active{
            display: block;//将display: none;隐藏的内容显示出来
        }

注意 item.dataset.target 是一种获取 id的用法，获取属性为data且后面是-target的属性，即data-target属性；（若是dataset.名称–>data-名称）
data-target属性存放的就是需要显示或者隐藏的 div的 id，这样通过id获取到元素，然后操作他的classList来实现效果------悬浮颜色变化也是同样的思路和做法。