jquery/js当前URL对当前栏目高亮突出显示的两种方案

来自:互联网
时间:2020-03-07
阅读:
免费资源网 - https://freexyz.cn/

html:

<div class="nav">

<ul>

<li><a href="index.html">首 页</a></li>

<li><a href="b.html">专家观点</a></li>

<li><a href="c.html">课题研讨</a></li>

<li><a href="d.html">研究报告</a></li>

</ul>

</div><!--/.nav-->

jquery:

//除了首页外当前URL对当前栏目高亮突出显示

$(".nav li a:not(:first)").each(function(){

$this = $(this);

if($this[0].href==String(window.location)){

$this.parent().addClass("selected");

}    

});

//当前URL对当前栏目高亮突出显示

$(".sidenav li a").each(function(){

$this = $(this);

if($this[0].href==String(window.location)){

$this.parent().addClass("selected");

}    

});

或者原生js:

//js 当前URL对当前栏目高亮突出显示

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://freexyz.cn/
返回顶部
顶部