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

zoukankan html css js c++ java

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

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

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;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
  【注：这是引用的会员yangedie回答会员copier的方法，地址 http://bbs.blueidea.com/thread-2863419-1-1.html 】

<!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;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;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、鼠标移入更改背景图片，其实跟上面的都不太一样，只不过有一些相似之处，也放到这里吧

<STYLE> .setUrl { background-image: url(sphere.jpg) } .loseUrl { background-image: url(none) } </style> </head> <BODY> <SPAN onmouseover="this.className='setUrl'" onmouseout="this.className='loseUrl'"> . . . </span>
    提示：您可以先修改部分代码再运行
5、最后，如果你需要使菜单横向排列的话，在CSS里加入这一行
  li {float:left;list-style-type: none;padding:0px;}

查看全文

相关阅读:
c# list排序的三种实现方式 (转帖)
LINQ TO SQL 中的join(转帖)
Linq to sql 增删改查（转帖）
DBLinq (MySQL exactly) Linq To MySql
github
eclipse安装github插件egit
Android中图片的目录
 Fragment
世界500强榜单出炉：中国公司首进三强沃尔玛居首
 经济学，不会挣钱，更不会赚钱

原文地址：https://www.cnblogs.com/zzh/p/1350935.html