1、当鼠标移入后，菜单显示成高亮；移出后恢复
2、在1的基础上，单击某个菜单项，该项保持高亮（页面不刷新）
3、在1的基础上，单击某个菜单项，该项保持高亮（页面刷新）
4、当鼠标移入后，改变菜单的背景图片，与1效果类似
1、这是最基本的一步，基本上要求菜单高亮显示的，这个需求会同时存在；这里我们用CSS来解决这个需求；
<!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>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<body>
<div id="primarymenu" class="Pmenus"><ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Hotel </a></li>
<li><a href="#"> Hotel Package </a></li>
<li><a href="#"> Promotion </a></li>
<li><a href="#"> My Booking </a></li>
<li><a href="#"> Help </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> Log Out </a></li>
</ul></div>
</body>
</html>
2、好，现在可以看到，第一点需求所要求的效果已经达到了，下面我们来实现第二个需求；这个就需要JS来实现了，简单一点，加入一段JavaScript
<!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>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<script type="text/javascript">
var lastClick;
window.onload=function(){
var divObj = document.getElementById("primarymenu");
aList = divObj.getElementsByTagName("a");
var listCount = aList.length;
for (var i=0;i<listCount;i++){
aList[i].onclick = function(){
this.parentNode.className = "focusurl";
if ( lastClick && lastClick !=this)
lastClick.parentNode.className ="";
lastClick = this;
}
}
}
</script>
<body>
<div id="primarymenu" class="Pmenus"><ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Hotel </a></li>
<li><a href="#"> Hotel Package </a></li>
<li><a href="#"> Promotion </a></li>
<li><a href="#"> My Booking </a></li>
<li><a href="#"> Help </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> Log Out </a></li>
</ul></div>
</body>
</html>
3、OK，上面的页面不刷新的情况，一旦页面刷新，效果就没有了，这时候怎么办呢？没关系，我们尝试另外一段JS代码来达到这个效果，虽然代码有点长：
【这段代码也是我在网上搜索而来，但是对其中一些代码片段不敢苟同，因此做了修改；而且这段JS的扩展性不够好，每次使用都必须根据实际情况进行修改】
【这段代码只是做个示范，运行的话应该不会出现效果，实际的网站例子在5那边有链接】
<!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>Menu Test</title>
</head>
<style>
.Pmenus, .Pmenus ul {margin:0;padding:0;}
.Pmenus li {
list-style:none;width:90px;height:25px;font-weight:bold;text-align:left;line-height:25px;margin:0;padding:0 0 2px 0;background:#AE359F;
}
.Pmenus li a {display:block;font-size:12px;font-family:Arial;text-decoration:none;}
.Pmenus li a:link, .Pmenus li a:visited {color:#EEEEEE;padding:0 3px;}
.Pmenus li a:hover {background: #F9B7E7;color:#AD1788;padding:0 3px;}
li.focusurl a {background: #F9B7E7;color:#AD1788;}
</style>
<script type="text/javascript">
var lastClick;
window.onload=function(){
var divObj = document.getElementById("primarymenu");
aList = divObj.getElementsByTagName("a");
var listCount = aList.length;
for (var i=0;i<listCount;i++){
aList[i].onclick = function(){
this.parentNode.className = "focusurl";
if ( lastClick && lastClick !=this)
lastClick.parentNode.className ="";
lastClick = this;
}
}
}
var tp;
var url = location.pathname+location.search;
var arr = new Array();
// 这里需要你输入一些自己的URL
arr.push( BASE_URL);
arr.push( BASE_URL + "home" );
arr.push( BASE_URL + "hotel" );
arr.push( BASE_URL + "package" );
arr.push( BASE_URL + "promotion" );
arr.push( BASE_URL + "mybooking" );
arr.push( BASE_URL + "help" );
arr.push( BASE_URL + "contactus" );
arr.push( BASE_URL + "user/login" );
arr.push( BASE_URL + "logout" );
for(i=0;i<arr.length;i++) {
if(url.lastIndexOf(arr[ i ]) > -1) {
tp=i;
}
}
var dv = document.getElementById("primarymenu");
var lk = dv.getElementsByTagName("a");
var link_index;
for(i=0;i<arr.length;i++) {
// 注意这里，与参考的资料上不一样，我做了改动【原先是获取lk的长度】
if(i == tp) {
switch(i) {
case 0:
case 1:
link_index = 0;
break;
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
link_index = i - 1;
break;
case 8:
case 9:
link_index = 7;
break;
}
}
}
lk[ link_index ].style.fontWeight="bold";
lk[ link_index ].style.color="#AD1788";
lk[ link_index ].style.background="#F9B7E7";
lk[ link_index ].style.padding="0 3px";
lk[ link_index ].className="focusurl";
</script>
<body>
<div id="primarymenu" class="Pmenus"><ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> Hotel </a></li>
<li><a href="#"> Hotel Package </a></li>
<li><a href="#"> Promotion </a></li>
<li><a href="#"> My Booking </a></li>
<li><a href="#"> Help </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> Log Out </a></li>
</ul></div>
</body>
</html>
posted on 2009-08-03 23:18
扭曲的铅笔 阅读(374)
评论(0) 编辑 收藏 所属分类:
J2EE