CSS 导航栏选中框背景高亮显示

最新推荐文章于 2024-08-05 15:37:52 发布

A1690363967

最新推荐文章于 2024-08-05 15:37:52 发布

阅读量3.8k

点赞数 1

分类专栏： JavaScript 文章标签：导航栏背景高亮样式 js 实现导航栏高亮显示

本文链接：https://blog.csdn.net/A1690363967/article/details/100039262

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS 导航栏选中框背景高亮显示

效果显示

在这里插入图片描述

以下为实现代码

代码片.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #nav ul{
            list-style: none;
        }
        #nav ul li {
            padding: 5px;
            float: left;
            margin: 10px;
        }
        #nav ul li a{
            color: black;
            line-height: 20px;
            text-decoration: none;
            padding: 5px;
        }
        #nav ul li.current{
            background: #e2214b;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">相册</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    let oMenu = my$('nav');
    let oUL = getFirstElementChild(oMenu);
    // 获取 id
    function my$(id) {
        return document.getElementById(id);
    }
    // 获取第一个元素
    function getFirstElementChild(element) {
        let node;
        let nodes = element.childNodes;
        let i=0;
        //遍历返回元素节点，当元素节点为空时返回null
        while (node = nodes[i++]){
            if (node.nodeType === 1){
                return node;
            }
        }
        return null;
    }
    // 添加注册事件
    for (let i=0;i<oUL.children.length;i++){
        let oLi = oUL.children[i];
        oLi.onclick = LiClick;
    }
    function LiClick() {
        for (let i=0;i<oUL.children.length;i++){
            let oLi = oUL.children[i];
            oLi.className = '';
        }
        this.className = 'current';
        return false;
    }
</script>
</html>

注释

1、style 标签里面首先定义了我们导航栏所需要样式，并且给第一个 li 元素添加 class = current属性用于操作后续的背景高亮显示；
2、js 代码里面首先我们获取存放导航栏内容的box，通过自定义函数获取到box 下的 ul 元素；
3、获取所有 ul 下的子节点；元素节点的 nodetype 返回值为 1 ，所以我们需要去判断获取到的节点是否为元素节点，返回元素节点，当不存在元素节点时候返回 null ；
4、获取到 li 元素之后，给 li 元素添加点击事件 LiClick()函数；在函数里面通过设置点击当前节点的class 属性，同时清除其他兄弟节点的class属性，即其他 li 节点的 class 属性