分享好友 教程首页 教程搜索 频道列表

js实现当前导航菜单高亮显示

2022-05-07 17:333260
+关注29
核心提示:用代码测试

html

<div id="navi">
<ul>
<li><a href="1.html">主页</a></li>
<li><a href="2.html">栏目1</a></li>
</ul>
</div>


js

<script type="text/javascript" language="javascript">
var nav = document.getElementById("navi");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a");
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
   var linkurl =  lilen[i].getAttribute("href");
     if(currenturl.indexOf(linkurl)!=-1)
        {
         last = i;
        }
}
         links[last].className = "hl";
</script>


css

#navi ul li.hl a{
color:#123456;
}


注意:

1、getElementById("navi");这一句括号里的navi必须与<div id="navi">里的navi一致。

2、js代码必须加到body里,即加到导航的下面,不能加到head里,否则出错不能使用。

3、links[last].className = "hl";中的hl是高亮代码的样式类名。


本文标签: #高亮 #导航 #js判断 #url
整理员:小黑
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

Ueditor编辑器 自动过滤Style内联样式问题

    请参照教程修改代码进行测试

小黑 开发技术2021-05-07

百度编辑器UEditor关闭css,js,html过滤

    找到 ueditor.config.js 将以下4个字段设置为 false ,更新缓存后即可

小黑 开发技术2021-05-07

百度编辑器(ueditor)添加自定义代码语言格式

    ueditor编辑器中有代码语言支持的功能但有时我们后台使用代码语言把代码加上标签后前端显示的时候可能为用另一个js语言根据pre标签中的语言来显示代码,这个时候就需要在后台自定义一些代码标签标识啦如:我想添加一个

小黑 开发技术2021-05-07

KindEditor编辑器Prettify代码高亮的用法

    KindEditor编辑器Prettify代码高亮的用法,先看下效果。在KindEditor编辑器里,点击插入程序代码图标,输入,见下图:效果如下:.prettyprint *{font-family:'courier new',monospace;}.prettyprint .com { color: #

小黑 开发技术2021-05-06

DESTOON6.0在编辑器kindedtior添加code代码高亮教程

    destoon6.0在编辑器kindedtior添加code代码高亮插件,本站对destoon改造了一下,有很多代码教程类文章,官方阉割了code功能,现在告诉大家destoon如何添加代码高亮。在/member/editor/kindeditor/init.inc.php的39行加上code,如下图

小黑 PHP2015-05-22

下一篇
我来说两句
抢沙发