电梯导航案例

小番水源

已于 2022-09-28 12:04:18 修改

阅读量135

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： html javascript 前端

于 2022-09-28 10:20:57 首次发布

本文链接：https://blog.csdn.net/weixin_43368552/article/details/127084368

js 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单网页布局案例，该案例中左侧固定位置的导航条与右侧的内容区实现了联动效果，即点击导航条上的不同选项时，页面会滚动到对应的内容区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

建议推荐添加上一个缓慢滚动效果。。。这样显得自然

具体私立：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            height: 3000px;
        }

        .aside {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .item {
            height: 40px;
            line-height: 40px;
            text-align: center;
            padding: 0 10px;
            cursor: pointer;
        }

        .active {
            background-color: red;
            color: #fff;
        }

        .content {
            width: 660px;
            margin: 400px auto;
        }

        .neirong {
            height: 300px;
            margin-bottom: 20px;
            color: #fff;
        }

        .content1 {
            background-color: red;
        }

        .content2 {
            background-color: blue;
        }

        .content3 {
            background-color: orange;
        }

        .content4 {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>

    <div class="aside">
        <div class="item active">男装/女装</div>
        <div class="item">儿童服装/游乐园</div>
        <div class="item">电子产品</div>
        <div class="item">电影/美食</div>
    </div>

    <div class="content">
        <div class="neirong content1">男装/女装</div>
        <div class="neirong content2">儿童服装/游乐园</div>
        <div class="neirong content3">电子产品</div>
        <div class="neirong content4">电影/美食</div>
    </div>

    <script>
        // 1.获取元素
        let items = document.querySelectorAll('.item')
        // 获取内容的盒子
        let neirongs = document.querySelectorAll('.neirong')
        //2.左侧aside模块，点击谁，谁高亮
        for (let i = 0; i < items.length; i++) {
            items[i].addEventListener('click', function () {

                // 找到上一个active 移除类
                // document.querySelector('.aside .active').classList.remove('active')
                // // 点击谁，谁就添加类    //类似于排他思想
                // this.classList.add('active')


                // 排他思想
                for (let j = 0; j < items.length; j++) {
                    items[j].classList.remove('active')
                }
                this.classList.add('active')

                // 3.右侧内容跟随走动       让页面滚动到对应的offsetTop值
                // console.log(neirongs[i].offsetTop);
                document.documentElement.scrollTop=neirongs[i].offsetTop  
                //Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如 HTML 文档的 <html> 元素）。
            })
        }




    </script>
</body>

</html>