菜单高亮显示的几种情况及实现

前段时间遇到了一个需求：访问页面时，跟该页面相关的Menu要求保持高亮。
因为是第一次遇到这个问题，在处理的时候走了不少弯路，后来在网络上搜索了一下，发现菜单高亮显示有几种不同层次的需求。
在下不才，在此将这几种需求以及各自的解决方案列出来，以作抛砖引玉之用，也希望后来遇到这种问题、并且看到我的帖子的朋友能从中获益。
代码是从项目中抽出来稍加修改而来，也许有的地方不够完善，大家一起探讨！

1、当鼠标移入后，菜单显示成高亮；移出后恢复
2、在1的基础上，单击某个菜单项，该项保持高亮（页面不刷新）
3、在1的基础上，单击某个菜单项，该项保持高亮（页面刷新）
4、当鼠标移入后，改变菜单的背景图片，与1效果类似

1、这是最基本的一步，基本上要求菜单高亮显示的，这个需求会同时存在；这里我们用CSS来解决这个需求；

提示：您可以先修改部分代码再运行

2、好，现在可以看到，第一点需求所要求的效果已经达到了，下面我们来实现第二个需求；这个就需要JS来实现了，简单一点，加入一段JavaScript
【注：这是引用的会员yangedie回答会员copier的方法，地址 http://bbs.blueidea.com/thread-2863419-1-1.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>

提示：您可以先修改部分代码再运行

上面新添加的JS，会根据你访问的不一样的URL，分别使对应的菜单获得style修饰，因此必须根据你的实际情况进行修改

4、鼠标移入更改背景图片，其实跟上面的都不太一样，只不过有一些相似之处，也放到这里吧

提示：您可以先修改部分代码再运行

5、最后，如果你需要使菜单横向排列的话，在CSS里加入这一行
li {float:left;list-style-type: none;padding:0px;}

posted @ 2008-12-09 10:58 zzh 阅读(736) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

DotNet开发之路

菜单高亮显示的几种情况及实现

公告