您的位置:首页 > Web前端 > JQuery

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

2013-11-13 10:57 465 查看
解决思路,导航栏目链接跟当前栏目对应页面链接之间做比较,相等就给对应的导航栏目所在的li元素添加样式

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";
}
}


jquery参考

js参考http://hi.baidu.com/pwqok/item/0e21cc14c53026ce38cb3073
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: