用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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
简单通过settimeout看javascript的运行机制
May 10 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上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Python列表计数及插入实例
2014/12/17 Python
python实现数据图表
2017/07/29 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python模块之paramiko实例代码
2018/01/31 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python和php学习哪个更有发展
2020/06/17 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
认错检讨书
2014/10/02 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书