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";
}
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论