二级菜单+图片的显示

喜崽

于 2023-03-12 14:56:01 发布

阅读量103

点赞数 1

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_48893127/article/details/129475901

版权

通过html+css+js来完成二级菜单

<!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>
        .box {
            width: 600px;
            height: 430px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: red;
        }

        /* 左侧 */
        #left {
            width: 200px;
            float: left;
        }

        #left img {
            width: 100%;
            height: 140px;
        }

        /* 右侧 */
        #right {
            float: right;
            width: 400px;
        }

        /* 清除浮动 */
        .cf::after {
            content: "";
            display: block;
            clear: both;
        }

        #right img {
            width: 100%;
            height: 430px;
            /* 图片隐藏 */
            display: none;
            margin-left: 2px;
        }

        /* 图片出现 */
        #right .on {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box cf">
        <div id="left">
            <img src="./images/01.jpg" alt="">
            <img src="./images/02.jpg" alt="">
            <img src="./images/03.jpg" alt="">
        </div>
        <div id="right">
            <img src="./images/01.jpg" alt="" class="on">
            <img src="./images/02.jpg" alt="">
            <img src="./images/03.jpg" alt="">
        </div>
    </div>


    <script>
        var leftImgs = document.querySelectorAll("#left img");
        var rightImgs = document.querySelectorAll("#right img");
        // 为左侧的每一个img标签添加鼠标移出事件
        for (let i = 0; i < leftImgs.length; i++) {
            leftImgs[i].onmouseover = function () {
                // 清除on所带来的影响
                for (let j = 0; j < leftImgs.length; j++) {
                    rightImgs[j].className = "";
                }
                rightImgs[i].className = "on";

            }
        }
    </script>
</body>

</html>