用js实现当前页面导航高亮的方法

当前栏目高亮显示 JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它 HTML代码如下

<div id="nav">
<ul>
<li data-href="/list/index_127.htm"><a href="/list/index_127.htm" title="资讯中心"><span>资讯中心</span></a></li>
<li data-href="/list/index_1.htm"><a href="/list/index_1.htm" title="网络编程"><span>网络编程</span></a></li>
<li data-href="/list/index_104.htm"><a href="/list/index_104.htm" title="数据库"><span>数据库</span></a></li>
<li data-href="/list/index_96.htm"><a href="/list/index_96.htm" title="脚本专栏"><span>脚本专栏</span></a></li>
<li data-href="/list/index_7.htm"><a href="/list/index_7.htm" title="实用技巧"><span>实用技巧</span></a></li>
<li data-href="/list/index_84.htm"><a href="/list/index_84.htm" title="软件编程"><span>软件编程</span></a></li>
</ul>
</div>

JAVASCRIPT代码如下

var myNav = document.getElementById("nav").getElementsByTagName("li");
for(var i=0;i<myNav.length;i++)
{
var links = myNav[i].getAttribute("data-href");
//alert(links)
//alert(myNav[i]);
var myURL = document.location.href;
if(myURL.indexOf(links) != -1)
{
myNav[i].className="show";
}
}

注意：js代码必须写在 nav代码的下面，原理其实就是获取nav里面li标签里面的data-href的值进行遍历，然后取当前连接进行对比，如果相同的话就返回li的class 的name为show

评论 0