当前位置：网站首页>js电梯导航基础案例

js电梯导航基础案例

2022-08-02 14:20:00 【铃儿响叮当不响】

重点代码：

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>

原网站

版权声明
本文为[铃儿响叮当不响]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_36507046/article/details/125879550

当前位置：网站首页>js电梯导航基础案例

js电梯导航基础案例

重点代码：

效果图展示：

完整代码：

边栏推荐

猜你喜欢

随机推荐