侧边栏壁纸
博主头像
黑山老妖博主等级

记录精彩的坎坷人生

  • 累计撰写 72 篇文章
  • 累计创建 85 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

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

我是我村的希望
2023-03-31 / 0 评论 / 0 点赞 / 9 阅读 / 5860 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-02-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

实现导航栏点击切换不同的颜色效果有很多种,下面是以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、最终效果如下

lheqzjyhksvu.png

eysyogpoawdq.png

全部完整代码
<!DOCTYPE html>
<html>
<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>
        <ul>
           <li>首页</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>
0
广告 广告

评论区