js实现点击切换导航栏效果(排他思想)_js导航栏切换

作者：小小林熬夜学编程 | 2024-02-08 14:04:48

踩

js导航栏切换

实现导航栏点击切换不同的颜色效果有很多种，下面是以js为例

具体实现步骤：

1.使用div 布局，


    <div class="container">
        <ul class="content-box">
           <li class="active">首页</li>
           <li>个人中心</li>
           <li>游戏中心</li>
           <li>创作中心</li> 
        </ul>
    </div>

2.设置样式，给ul 设置宽高，使用 display:flex 使其li 元素横向排列，同时居中导航栏。


  * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;   /* 去除下划线 */
        }
        .content-box{
           width: 500px;
           height: 200px;
           /* border: 1px solid #000; */
           display: flex;
           justify-content: space-between;
           margin: 0 auto;
        }

3.然后给li 设置样式，给每个li 设置宽高，添加boder属性，采用display：flex ，让内部文字上下居中。


 .content-box li {
             border: 1px solid #000;
             width: 25%;
             height: 25%;
             justify-content: center;
             align-items: center;
             display: flex;
             cursor: pointer;   
        }

4.默认第一个li 是选中的，所以给第一个li 设置背景颜色样式


     .active {
            background-color: pink;
        }

5.使用js代码，首先获取全部的li标签

  let lis = document.querySelectorAll('li')

6.使用for 循环遍历全部li元素，给每个li元素设置监听事件，同时再使用一次for 循环，利用排他思想，点击当前的元素时，背景颜色发生变化，同时移除其他标签的背景颜色，这里用到classList属性的add()方法以及remove()方法


       for (let i = 0 ; i < lis.length; i++) {
             lis[i].setAttribute('index',i)
             lis[i].onclick = function() {
                //  console.log(lis[i]); 
                for (let i = 0 ; i < lis.length; i++) {
                       lis[i].classList.remove('active')
                }
                       this.classList.add('active')
             }
            
         }

7.最终效果如下：

初始状态：

点击切换效果：

附注全部代码：


<!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>
        * {
            margin: 0;
            padding: 0;
        }
        li{ 
            /* 去除下划线 */
            list-style: none;
        }
        .content-box{
           width: 500px;
           height: 200px;
           /* border: 1px solid #000; */
           display: flex;
           justify-content: space-between;
           margin: 0 auto;
        }
        .content-box li {
             border: 1px solid #000;
             width: 25%;
             height: 25%;
             justify-content: center;
             align-items: center;
             display: flex;
             cursor: pointer;   
        }
        .active {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="content-box">
           <li class="active">首页</li>
           <li>个人中心</li>
           <li>游戏中心</li>
           <li>创作中心</li> 
        </ul>
    </div>
    <script>
         let uls = document.querySelector('.content-box')
         let lis = document.querySelectorAll('li')
         for (let i = 0 ; i < lis.length; i++) {
             lis[i].setAttribute('index',i)
             lis[i].onclick = function() {
                //  console.log(lis[i]); 
                for (let i = 0 ; i < lis.length; i++) {
                       lis[i].classList.remove('active')
                }
                       this.classList.add('active')
             }
            //  let index = lis[i].getAttribute('index');
            //  console.log(index);
            
         }
    </script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/69347