练手的结果，留个痕迹。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
.menu {
width:800px;
height:50px;
text-align:center;
}
.menu ul {
list-style-type:none;
height:50px;
}
.menu ul li {
float:left;
width:15%;
height:30px;
background-color:#999;
font-size:16px;
font-weight:bolder;
}
.leftborder {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #6C9;
}
.rightboder {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #6C9;
}
.menuactive {
color:#F00;
}
.menuunactive {
color:#6C9;
}
</style>
<script type="text/javascript">
function UrlChangeMenu(){
var url=window.location.href;
var paras=url.split("?");
if(paras.length>1){
var values = paras[1].split("=");
if(values.length>1){
var menus = document.getElementsByName("menu");
if(menus){
for(var i=0;i<menus.length;i++) {
menus[i].className="menuunactive";
}
}
document.getElementById(values[1]).className="menuactive";
}
}
}
</script>
</head>
<body onload="UrlChangeMenu()">
<div class="menu">
<ul>
<li> <a href="daohanglan.htm?id=menu1" class="menuactive" name="menu" id="menu1" > ASP.NET</a></li>
<li class="leftborder"> <a href="daohanglan.htm?id=menu2" class="menuunactive" name="menu" id="menu2" > JAVASCRIPT</a></li>
<li class="leftborder"> <a href="daohanglan.htm?id=menu3" class="menuunactive" name="menu" id="menu3" > CSS</a></li>
<li class="leftborder"> <a href="daohanglan.htm?id=menu4" class="menuunactive" name="menu" id="menu4" > HTML</a></li>
</ul>
</div>
</body>
</html>
