两种简单实现菜单高亮显示的JS类代码

记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类.

其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式.

第一种判断当前URL值高亮类代码:


代码如下:

//@Mr.Think---判断URL实现菜单高亮显示
function 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<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");}
第二种点击后高亮显示当前类:


代码如下:

//@Mr.Think---点击实现高亮显示
function 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 < links.length; i++) {
links[i].onclick = function() {
for (n = 0; n < 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值来使某一类型链接不被遍历,等等.
源码下载及演示
鉴于有朋友不知道如何使用,我特地整理了一下我之前写的与这个类有关的页面,给一个DEMO页面和下载地址,需要的朋友可以查看或下载.

打包下载地址

赞 (0)

相关推荐

  • 用js查找法实现当前栏目的高亮显示的代码

    当前栏目高亮显示        JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回 其它,并与返回其它结果的那个字符串所在元素定义一个class. HTML 复制代码 代码如下: <div id="nav">   <ul>   <li><a href="http://www.jb51.net/html/list/index_127.htm" 

  • jsp网页搜索结果中实现选中一行使其高亮

    我在做搜索结果时,为了好看需要将选中的行变的高亮些,我使用了一个onclick 事件: 复制代码 代码如下: var assno=""; function check(obj,che,rwid){ if(obj.checked==true){ document.getElementById(rwid).style.background ="blue"; assno=document.getElementById(che).value; alert(assno); }

  • Angularjs实现搜索关键字高亮显示效果

    需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键字 使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>

  • js 玩转正则表达式之语法高亮

    学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解. 那么我们来分析下两位大神 次碳酸钴 和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <几个小例子教你如何实现正则表达式highlight高亮> 之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则 复

  • JavaScript实现的搜索及高亮显示功能示例

    JavaScript实现的搜索及高亮显示功能示例

    本文实例讲述了JavaScript实现的搜索及高亮显示功能.分享给大家供大家参考,具体如下: 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉 效果图: html: <div class="contracts-header">名称: <input type="text" value="" id="sea

  • javascript高亮效果的二种实现方法

    js高亮方法一: 复制代码 代码如下: <script> function HighLight(nWord){ if(nWord!=''){ var keyword = document.body.createTextRange(); while(keyword.findText(nWord)){ keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>&

  • javascript 关键字高亮显示实现代码

    关键字高亮显示 我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET

  • angularjs实现搜索的关键字在正文中高亮出来

    angularjs实现搜索的关键字在正文中高亮出来

    1.定义高亮 filter 我们希望搜索的关键字在正文中高亮出来,正文内容就是过滤器的第一个参数,第二个参数就是搜索关键字,这样,我们的过滤器将会有两个参数了. 高亮的原理很简单,将需要高亮的内容使用 span 标记隔离出来,再加上一个高亮的 class样式 进行描述就可以了. app.filter("highlight", function($sce, $log){ var fn = function(text, search){ $log.info("text: &quo

  • 用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

  • Javascript实现的CSS代码高亮显示

    相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.

随机推荐