用js查找法实现当前栏目的高亮显示的代码_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了用js查找法实现当前栏目的高亮显示的代码_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1791字,纯文字阅读大概需要3分钟。
内容图文
![用js查找法实现当前栏目的高亮显示的代码_javascript技巧](/upload/InfoBanner/zyjiaocheng/308/9ebcd6a289504bd088b2f4316e56e100.jpg)
JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回
其它,并与返回其它结果的那个字符串所在元素定义一个class.
HTML
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";
}
}
当前栏目高亮显示不知道你明白了没有?没有的话,我说详细点。首先,你点击一个连接,比如:
点击之后浏览器发生了什么变化呢?是的,就是地址栏变成了:
http://www.gxlcms.com/html/list/index_127.htm
使用 document.location.href;
取得的就是这个地址(http://www.gxlcms.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函数来比较是否页面的所有连接中,有关键字在http://www.gxlcms.com/html/list/index_127.htm中出现。若有的话,就表
明是当前连接,那么就修改当前连接的样式。这就实现了当前栏目高亮显示,当前栏目高亮显示是一个很实用的技巧,在增加用户体验方面尤
其有好处。但在实用过程中,可能需要注意一些细节问题,比如搜索吧的博客是用外链的方式来连接的,那么在处理的时候,点了这个外链的
时候是否高亮呢?这里也只是我觉得当前栏目高亮显示时可能出现的问题稍微说一下,说不定你已经有解决方法了。
内容总结
以上是互联网集市为您收集整理的用js查找法实现当前栏目的高亮显示的代码_javascript技巧全部内容,希望文章能够帮你解决用js查找法实现当前栏目的高亮显示的代码_javascript技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。