用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做得动态表格(注释写的很清楚)
Dec 29 Javascript
javascript生成大小写字母
Jul 03 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
JS实现简单的表格增删
Jan 16 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
PHP图片上传代码
2013/11/04 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python脚本实现虾米网签到功能
2016/04/12 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python中str内置函数用法总结
2020/12/27 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
爱牙日活动总结
2014/08/29 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年审计工作总结
2014/11/17 职场文书
劳资员岗位职责
2015/02/13 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
Mysql开启外网访问
2022/05/15 MySQL