用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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 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基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
json 带斜杠时如何解析的实现
2019/08/12 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
Python中的列表知识点汇总
2015/04/14 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
python生成随机红包的实例写法
2019/09/02 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
本科毕业生自我鉴定
2013/11/02 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
红头文件任命书范本
2014/06/05 职场文书
物业品质提升方案
2014/06/08 职场文书
小学教育见习报告
2014/10/31 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
小学远程教育工作总结
2015/08/13 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server