一个导航条

最新推荐文章于 2022-06-11 20:59:54 发布

恼火的昵称

最新推荐文章于 2022-06-11 20:59:54 发布

阅读量338

点赞数

分类专栏： Javascript Div+Css 文章标签： javascript xhtml class url float html

本文链接：https://blog.csdn.net/chenglidian/article/details/7107340

版权

Javascript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Div+Css

4 篇文章 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>
<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" οnclick="get_bg('1')">导航一</a></li>
            <li><a href="javascript:" id="navigation_02" οnclick="get_bg('2')">导航二</a></li>
            <li><a href="javascript:" id="navigation_03" οnclick="get_bg('3')">导航三</a></li>
            <li><a href="javascript:" id="navigation_04" οnclick="get_bg('4')">导航四</a></li>
            <li><a href="javascript:" id="navigation_05" οnclick="get_bg('5')">导航五</a></li>
        	<div style="clear:both;"></div>
        </ul>
    </div>
</body>
</html>

利用javascript代码动态改变css样式，从而实现改变鼠标点击后的背景，