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

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;}

查看全文

相关阅读:
XML（学习笔记）
css样式学习笔记
 Request(对象)
sql一些错误修改的总结
 转载（如何学习C#）
sql server(学习笔记2 W3Cschool)
sql sqrver(学习笔记1 W3Cschool)
关于 flutter开发碰到的各种问题，有的已经解决有的一直没解决或者用其他方法替代
 关于 Flutter IOS build It appears that your application still contains the default signing identifier.
关于 flutter本地化问题 The getter 'pasteButtonLabel' was called on null

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