对于静态页面通过当前URL对当前栏目链接高亮显示这个技巧很多小伙伴问过墨鱼,今天放一下通用代码给小伙伴参考:
HTML代码:
<div class="nav"> <ul> <li><a href="index.html">首页</a></li> <li><a href="list_1.html">栏目一</a></li> <li><a href="list_2.html">栏目二</a></li> <li><a href="list_3.html">栏目三</a></li> </ul> </div>
JQ代码:
//除了首页外当前URL对当前栏目高亮突出显示 $(".nav li a:not(:first)").each(function(){ $this = $(this); if($this[0].href==String(window.location)){ $this.parent().addClass("selected"); } }); //当前URL对当前栏目高亮突出显示 $(".nav li a").each(function(){ $this = $(this); if($this[0].href==String(window.location)){ $this.parent().addClass("selected"); } });
或者使用原生js代码:(HTML代码部分的class="nav"改成id="nav")
var myNav = document.getElementById("nav").getElementsByTagName("a"); for(var i=0;i<myNav.length;i++){ var links = myNav[i].getAttribute("href"); var myURL = document.location.href; if(myURL.indexOf(links) != -1){ myNav[i].parentNode.className="selected"; } }
本文地址:https://www.moyublog.com/notes/1235.html
加入我们:微信:搜索“Moyu-Blog” 帝国CMS模板客户群:QQ二群---909235407 QQ一群(已满)---106997031
版权声明:本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载请注明本文地址!