原生js实现菜单栏高亮

最新推荐文章于 2024-04-19 17:38:25 发布

每一天，每一步

最新推荐文章于 2024-04-19 17:38:25 发布

阅读量710

点赞数

分类专栏： javaScript 文章标签： js javascript css dom

本文链接：https://blog.csdn.net/u010234868/article/details/118034180

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul li {
			list-style: none;
			float: left;
			height: 30px;
			line-height: 30px;
		}
		ul li a {
			display: inline-block;
			padding: 0 10px;
			text-decoration: none;
			color: #000;
			font-size: 16px;
		}
		ul li a:hover {
			background-color: skyblue;
		}
		.current {
			background-color: skyblue;
			color: #fff;
		}
	</style>
	<script src="js/common.js"></script>
</head>
<body>
	<div id="menu">
		<ul>
			<!-- <li class="current"><a href="javascript:alert(1)">首页</a></li> 浏览器的地址栏可以执行javascript代码 void是一个运算符，运算后面的表达式，始终返回undefined-->
			<li class="current"><a href="javascript:void(0)">首页</a></li>
			<li><a href="javascript:void(0)">产品</a></li>
			<li><a href="javascript:void(0)">生产线</a></li>
			<li><a href="javascript:void(0)">联系</a></li>
			<li><a href="javascript:void(0)">关于</a></li>
		</ul>
	</div>
	
	<script>
		// 获取id为menu的元素，my$()在common.js中定义
		var menu = my$('menu');
		// 获取menu的第一个子元素，getFirstElementChild()在common.js中定义
		var ul = getFirstElementChild(menu);
		if (ul.hasChildNodes()) {
			for (var i = 0; i < ul.children.length; i++) {
				var li = ul.children[i];
				// 获取li的第一个子元素a
				var link = getFirstElementChild(li);
				link.onclick = currentClassChange; // 将函数赋值给a的点击事件，而不是调用函数，不用getFirstElementChild()
			}
		}
		function currentClassChange() {
			// 去掉所有li的class="current"
			for (var i = 0; i < ul.children.length; i++) {
				var li = ul.children[i];
				li.className = '';
			}
			// 给当前点击的链接的li加上class="current"
			this.parentNode.className = 'current';
			return false;  // 取消a的href默认行为
		}
	</script>
</body>
</html>

// common.js

// 通过id获取元素
function my$(element) {
	var el = document.getElementById(element);
	return el;
}

// 获取元素的第一个子元素
function getFirstElementChild(element) {
	var node, nodes = element.childNodes, i = 0;
	while(node = nodes[i++]) {
		if (node.nodeType === 1) {
			return node;
		}
	}
	return null;
}

每一天，每一步

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js实现菜单栏高亮

<div id="menu"> <ul>  <li class="current"><a href="javascript:void(0)"&g.
复制链接

扫一扫