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 属性

CSS 导航栏选中框背景高亮显示相关推荐

css导航栏选中是有移动下划线的效果
技术不行,拿百度前端学院题目练习,其中遇到一个导航栏,每当选中一个选项,下面出现一个下划线标注.我本来想直接省掉这个功能,后来觉得这样学习估计什么都学不到.后来思考和查阅,记录如下.大概是这么个效果: ...
html 导航右侧弹出层,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
php网页设计导航栏代码,CSS导航栏及弹窗示例代码
最近整理了CSS导航栏及弹窗,具体如下: CSS导航先来看下效果: Insert your title body{ font-size:12px; } #discuss{ width:990px; ...
CSS — 导航栏篇（二）
搜索框在上文 CSS - 导航栏篇(一),我们已经介绍了导航栏组成要素,以及其中两大元素(LOGO 和选项列表)的书写思路,现在开始介绍第三大元素 -- 搜索框搜索框的作用,就是让你输入你想要搜 ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
简而言之就是,将导航的ul列表放在一个盒子里,然后导航栏置顶,设置透明度,设置z-index值效果图如下: 页面代码: body: <div clas ...
教你玩转CSS 导航栏
目录 CSS 导航栏导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框
html导航栏文字怎么平均,对齐HTML/CSS导航栏中的文本？
好吧,很明显我做错了什么.基本上我试图在我的页面顶部创建一个垂直导航栏,在图片的右侧.对齐HTML/CSS导航栏中的文本? 它应该是这样的: 首页简历联系我不知怎的,它不断结束了这样的: 主页简历 ...
css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...

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

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

效果显示

以下为实现代码

注释

CSS 导航栏选中框背景高亮显示相关推荐

最新文章

热门文章