js特效代码-onmouseover/onclick 改变标签(背景)颜色

最新推荐文章于 2022-06-03 12:04:36 发布

weixin_30845171

最新推荐文章于 2022-06-03 12:04:36 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zgzy/p/3205236.html

本文介绍了一个使用HTML和JavaScript实现的导航菜单案例。通过JavaScript监听点击事件并改变对应的列表项样式，实现选中状态的高亮显示效果。该案例适用于初学者理解网页元素与脚本之间的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function hc(ev) {
	var list = document.getElementsByTagName("li");
	for(i=0; i<list.length; i++){
			list[i].className = "";
	}
	ev = ev || window.event;
  	var tmp = ev.target || ev.srcElement;
                tmp = (tmp.tagName == "LI")?tmp:tmp.parentNode;
	tmp.className = "linow";
}
</script>
<style type="text/css">
* {font:12px/150% "宋体";}
.LeftM li { list-style:none; width:180px; height:20px; background-color:#CCc; border-bottom:#fff solid 2px;}
.LeftM a { color:#f01;}
.LeftM a:hover { position:relative; left:1px; top:1px;}
.linow a { color:#000;}
</style>
</head>
<body>
<ul class="LeftM">
	<li onClick="hc();"><a href="#">基本概念</a></li>
	<li onClick="hc()"><a href="#">基本概念</a></li>
	<li onClick="hc()"><a href="#">行政职业能力测试</a></li>
	<li onClick="hc()"><a href="#">申论</a></li>
</ul>
<br>
</body>
</html>

转载于:https://www.cnblogs.com/zgzy/p/3205236.html