竖型菜单导航 li选中变色
<!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="#" onclick="change(this)"><font>我的网站</font></a> </li> <li><a id="a1" href="#" onclick="change(this)">我的帐务</a> </li> <li><a id="a2" href="#" onclick="change(this)">网站管理</a> </li> <li><a id="a3" href="#" onclick="change(this)">网站管理</a> </li> </ul></div></body></html>?