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);// 获取 idfunction my$(id) {return document.getElementById(id);}// 获取第一个元素function getFirstElementChild(element) {let node;let nodes = element.childNodes;let i=0;//遍历返回元素节点，当元素节点为空时返回nullwhile (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 属性
