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


Posted in Javascript onNovember 24, 2007

当前栏目高亮显示 

       JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它结果的那个字符串所在元素定义一个class.

HTML

<div id="nav"> 
<ul> 
<li><a href="//3water.com/html/list/index_127.htm" title="资讯中心"><span>资讯中心</span></a></li> 
<li><a href="//3water.com/html/list/index_1.htm" title="网络编程"><span>网络编程</span></a></li> 
<li><a href="//3water.com/html/list/index_104.htm" title="数据库"><span>数据库</span></a></li> 
<li><a href="//3water.com/html/list/index_96.htm" title="脚本专栏"><span>脚本专栏</span></a></li> 
<li><a href="//3water.com/html/list/index_7.htm" title="实用技巧"><span>实用技巧</span></a></li> 
<li><a href="//3water.com/html/list/index_84.htm" title="软件编程"><span>软件编程</span></a></li> 
<li><a href="//3water.com/html/list/index_8.htm" title="网页制作"><span>网页制作</span></a></li> 
<li><a href="//3water.com/html/list/index_86.htm" title="操作系统"><span>操作系统</span></a></li> 
<li><a href="//3water.com/html/list/index_11.htm" title="经典网摘"><span>经典网摘</span></a></li> 
<li><a href="//3water.com/html/list/index_27.htm" title="网站技巧"><span>网站技巧</span></a></li> 
<li><a href="//3water.com/html/list/index_99.htm" title="免费资源"><span>免费资源</span></a></li> 
<li><a href="//3water.com/html/list/index_54.htm" title="关于我们"><span>关于我们</span></a></li> 
<li><a href="//3water.com/search.asp" title="文章搜索"><span>文章搜索</span></a></li> 
</ul> 
</div>

JS

var myNav = document.getElementById("nav").getElementsByTagName("a"); 
for(var i=0;i<myNav.length;i++) 
{ 
 var links = myNav[i].getAttribute("href"); 
 //alert(links) 
 //alert(myNav[i]); 
 var myURL = document.location.href; 
 if(myURL.indexOf(links) != -1) 
 { 
  myNav[i].className="d"; 
 } 
}

当前栏目高亮显示不知道你明白了没有?没有的话,我说详细点。首先,你点击一个连接,比如: <li><a 
href="//3water.com/html/list/index_127.htm" title="资讯中心">资讯中心</a></li> 

点击之后浏览器发生了什么变化呢?是的,就是地址栏变成了:

//3water.com/html/list/index_127.htm

使用 document.location.href; 

取得的就是这个地址(//3water.com/html/list/index_127.htm)。

然后我们再遍历当前网页上的所有连接,取得每个连接href的值。遍历的代码: 

var myNav = document.getElementById("nav").getElementsByTagName("a"); 
for(var i=0;i<myNav.length;i++) 
{ 
 var links = myNav[i].getAttribute("href"); 
}

     使用indexOf函数来比较是否页面的所有连接中,有关键字在//3water.com/html/list/index_127.htm中出现。若有的话,就表 明是当前连接,那么就修改当前连接的样式。这就实现了当前栏目高亮显示,当前栏目高亮显示是一个很实用的技巧,在增加用户体验方面尤 其有好处。但在实用过程中,可能需要注意一些细节问题,比如搜索吧的博客是用外链的方式来连接的,那么在处理的时候,点了这个外链的 时候是否高亮呢?这里也只是我觉得当前栏目高亮显示时可能出现的问题稍微说一下,说不定你已经有解决方法了。

Javascript 相关文章推荐
JavaScript变量声明详解
Nov 27 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 #Javascript
document.designMode的功能与使用方法介绍
Nov 22 #Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 #Javascript
摘自百度的图片轮换效果代码
Nov 19 #Javascript
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 #Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 #Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 #Javascript
You might like
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python机器人运动范围问题的解答
2019/04/29 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
人民教师求职自荐信
2014/03/12 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
卫生系统先进事迹
2014/05/13 职场文书
欢迎横幅标语
2014/06/17 职场文书
现场活动策划方案
2014/08/22 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
合作合同协议书
2016/03/21 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python