js电梯导航基础案例

最新推荐文章于 2024-04-10 15:12:17 发布

铃儿响叮当不响

最新推荐文章于 2024-04-10 15:12:17 发布

阅读量997

点赞数 1

分类专栏：前端js笔记文章标签： css html

本文链接：https://blog.csdn.net/qq_36507046/article/details/125879550

版权

前端js笔记专栏收录该内容

43 篇文章 7 订阅

订阅专栏

重点代码：

for(let i = 0; i < items.length; i++){

items[i].addEventListener('mouseenter',function(){

// 侧边导航栏排他思想

document.querySelector('.item.active').classList.remove('active')

this.classList.add('active')

})

items[i].addEventListener('click',function(){

// 点击使得当前页面滚动的距离等于div距离顶部的长度达到动态跳转的效果

document.documentElement.scrollTop = content.children[i].offsetTop

aside.style.marginTop = content.children[i].offsetTop + 'px'

})

}

效果图展示：

完整代码：

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        .aside {
        float: left;
        height: 160px;
        width: 100px;
        background-color: whitesmoke;
        }
       .item {
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        text-align: center;
       }
       .active {
        transition: all .5s;
        background-color: darkred;
        color:white;
       }
       .active:hover {
        box-shadow: 0 5px 5px 0 gray;
        transform: translate(0, -5px);
       }
       .content {
        margin: 0 200px 0 200px;
        height: 2000px;
       }
       .content1 {
        margin: 50px auto;
        height: 300px;
        width: 500px;
        background-color: skyblue;
        margin-top: 50px;
       }
       .content2 {
        margin: 50px auto;
        height: 300px;
        width: 500px;
        background-color: pink;
        margin-top: 50px;
       }
       .content3 {
        margin: 50px auto;
        height: 300px;
        width: 500px;
        background-color: rgb(122, 120, 164);
        margin-top: 50px;
       }
       .content4 {
        margin: 50px auto;
        height: 300px;
        width: 500px;
        background-color: peachpuff;
        margin-top: 50px;
       }
    </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="content1">零食</div>
        <div class="content2">家用电器</div>
        <div class="content3">金银首饰</div>
        <div class="content4">化妆品</div>
    </div>
    <script>
        let items = document.querySelectorAll('.item')
        let content = document.querySelector('.content')
        let aside = document.querySelector('.aside')
        for(let i = 0; i < items.length; i++){
          items[i].addEventListener('mouseenter',function(){
            document.querySelector('.item.active').classList.remove('active')
            this.classList.add('active')
          })
          items[i].addEventListener('click',function(){
            document.documentElement.scrollTop = content.children[i].offsetTop
            aside.style.marginTop = content.children[i].offsetTop + 'px'
            })
        }
    </script>
</body>
</html>