JS练习之导航菜单点击激活，js原生写法

最新推荐文章于 2023-03-27 20:18:52 发布

「已注销」

最新推荐文章于 2023-03-27 20:18:52 发布

阅读量717

点赞数

分类专栏： JAVASCRIPT HTML/CSS

本文链接：https://blog.csdn.net/weixin_41855546/article/details/107738777

版权

JAVASCRIPT 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML/CSS

4 篇文章 0 订阅

订阅专栏

点击菜单激活，为当前点击的目标追加样式，比如背景颜色或字体颜色，这种操作称之为“排他思想”，其实现的逻辑为：
1、先把菜单的样式复原，使用for循环处理
2、为当前的元素增加样式，使用for循环处理

以下是实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航激活类效果</title>
</head>
<body>
    <div>
        <button>精品</button>
        <button>上新</button>
        <button>还品</button>
        <button>精品</button>
        <button>精品</button>
        <button>精品</button>
        <button>精品</button>
        <button>精品</button>
        <button>精品</button>
        <button>精品</button>
        <button>精品</button>
    </div>
    <script>
        var btns = document.querySelectorAll("button");
        // btns是
        for(var i=0; i<btns.length; i++){
            btns[i].onclick = function(){
                // 先把所有的按钮复原,再对this进行操作
                for(var i=0; i<btns.length; i++){
                    btns[i].style.backgroundColor = "";
                }
                this.style.backgroundColor = "red";
            }
        }
    </script>
</body>
</html>

效果如下，有点粗糙
在这里插入图片描述

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS练习之导航菜单点击激活，js原生写法

点击菜单激活，为当前点击的目标追加样式，比如背景颜色或字体颜色，这种操作称之为“排他思想”，其实现的逻辑为：1、先把菜单的样式复原，使用for循环处理2、为当前的元素增加样式，使用for循环处理以下是实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
复制链接

扫一扫