vns9848威尼斯城

vns9848威尼斯城

028-85954568

网站建设之同一页面两种高亮当前菜单

在同一页面两种高亮显示当前菜单的需求.写静态页时,要实现高亮都是在每个页面加不同的样式,高亮显示我觉得是比较常用到的效果,
第一种方法是通过遍玩历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式.
第一种判断当前URL值高亮类代码:
<A>[email protected] highURL(menuId,classCur){if(!document.getElementById) return false;if(!document.getElementById(menuId)) return false;if(!document.getElementsByTagName) return false;var menuId=document.getElementById(menuId);var links=menuId.getElementsByTagName("a");for(var i=0; i&lt;links.length; i++ ){var menuLink=links[i].href;var currentLink=window.location.href;if(currentLink.indexOf(menuLink)!=-1){links[i].className=classCur;}}}参数说明:
1.menuId : 链接组所在ID;2.classCur : 高亮显示时的样式class名.调用方法:
window.onload=function highThis(){highURL("youId","youhighclass");}第二种点击后高亮显示当前类:
<A>[email protected] highOnclick(elemId,classCur) {if (!document.getElementsByTagName) return false;if (!document.getElementById) return false;if (!document.getElementById(elemId)) return false;var elemId = document.getElementById(elemId);var links = elemId.getElementsByTagName("a");for (i = 0; i &lt; links.length; i++) {          links[i].onclick = function() {                for (n = 0; n &lt; links.length; n++) {               links[n].className = "";                this.className = classCur;                this.blur();          }     }}}参数说明:
1.elemId : 链接组所在ID;2.classCur : 点击后显示的样式class名.调用方法:
window.onload=function highThis(){highOnclick("youId","youhighclass");}此方法扩展性较强,比如可以通过判断parentNode.nodeName值来使某一类型链接不被遍历
优优科技版权所有,未经允许不得转载
XML 地图 | Sitemap 地图