一个导航条

来源：互联网发布：量化 java 招聘编辑：程序博客网时间：2024/04/23 14:28
<!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><style type="text/css">.box ul{margin:0px;padding:0px;display:block; list-style:none;}.box ul li{margin:0px;padding:0px;display:block; float:left; margin-right:-1px;}.box ul li a{width:80px;height:30px; line-height:30px; text-decoration:none; text-align:center; display:block; background:url(http://hi.csdn.net/attachment/201112/27/4157805_1324992501lWxO.png) no-repeat 0px 0px; text-shadow:#F9F9F9 1px 1px 0px; color:#003300;}.box ul li a:hover{ background:url(http://hi.csdn.net/attachment/201112/27/4157805_1324992501lWxO.png) no-repeat 0px -30px;color:red;}.box ul .navigation_a{ background:url(http://hi.csdn.net/attachment/201112/27/4157805_1324992501lWxO.png) no-repeat 0px -30px; color:red;}</style><script type="text/javascript">function get_bg(num){for( var n=1; n<=5; n++){if(n==num) {document.getElementById("navigation_0"+n).className="navigation_a";}else{document.getElementById("navigation_0"+n).className="";}}}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>一个导航</title></head><body><div class="box">    <ul>        <li><a href="javascript:" id="navigation_01" class="navigation_a" onclick="get_bg('1')">导航一</a></li>            <li><a href="javascript:" id="navigation_02" onclick="get_bg('2')">导航二</a></li>            <li><a href="javascript:" id="navigation_03" onclick="get_bg('3')">导航三</a></li>            <li><a href="javascript:" id="navigation_04" onclick="get_bg('4')">导航四</a></li>            <li><a href="javascript:" id="navigation_05" onclick="get_bg('5')">导航五</a></li>        <div style="clear:both;"></div>        </ul>    </div></body></html>
利用javascript代码动态改变css样式，从而实现改变鼠标点击后的背景，