当前栏目高亮显示 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
发表评论 取消回复