竖型菜单导航 li选中变色

最新推荐文章于 2021-06-10 03:42:46 发布

iteye_5361

最新推荐文章于 2021-06-10 03:42:46 发布

阅读量349

点赞数

分类专栏： Jsp 文章标签： html

本文链接：https://blog.csdn.net/iteye_5361/article/details/82310142

版权

Jsp 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
 font-family: arial, 宋体, serif;
 font-size:12px;
}
#nav {
 width:180px;
 line-height: 54px; 
 list-style-type: none;
 text-align:left;
    /*定义整个ul菜单的行高和背景色*/
}

/*==================一级目录===================*/
#nav a {
 width: 160px; 
 display: block;
 padding-left:20px;
 /*Width(一定要)，否则下面的Li会变形*/
}

#nav li {
 background:#F7F7F7; /*一级目录的背景色*/
 border-bottom:#FFF 1px solid; /*下面的一条白边*/
 float:left;
 /*float：left,本不应该设置，但由于在Firefox不能正常显示
 继承Nav的width,限制宽度，li自动向下延伸*/
}

#nav li a:hover{
 background:#999999; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link  {
 color:#000000;text-decoration:none;
}
#nav a:visited  {
color:#000000;text-decoration:none;
}
#nav a:hover  {
 color:#FFF;text-decoration:none;font-weight:bold;
}
.bg{
color:#000000;background:#999999;text-decoration:none;font-weight:bold;}
</style>
<script type="text/javascript"> 
	function change(whichLink) {

		var as = document.getElementsByTagName("a");
		for ( var i = 0; i < as.length; i++) {
			as[i].setAttribute("class");
			whichLink.setAttribute("class", "bg");
		}
	}
 
</script>
</head>
<body>
<div>
  <ul id="nav">
    <li><a id="a0" href="#"  οnclick="change(this)"><font>我的网站</font></a> </li>
    <li><a id="a1" href="#" οnclick="change(this)">我的帐务</a> </li>
    <li><a id="a2" href="#" οnclick="change(this)">网站管理</a> </li>
    <li><a id="a3" href="#" οnclick="change(this)">网站管理</a> </li>
  </ul>
</div>
</body>
</html>