用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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
精解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分页函数
2006/07/08 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP加密解密类实例代码
2016/07/20 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
html5时钟实现代码
2010/10/22 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
计算机毕业生自荐信范文
2014/03/23 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
2016年教师节感言
2015/12/09 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
设置IIS Express并发数
2022/07/07 Servers