订阅汇聚素材网Feed

js 当前导航菜单高亮显示

为了让访问者清楚明了的知道自己的当前位置,一个很好的办法就是突出访问者当前所在栏目的菜单条目,也就是我们常说的当前导航菜单高亮显示;实现这个表现样式的方法很多,针对各种情况可以使用相应的手段来实现。最简单、也是最常用的就是通过CSS来实现,所需要的是在菜单里添加一个current辅助样式,所以这种方法有一定的局限性。

比如下面这个菜单:

<ul id=”nav”>
<li><a href=”index.html”>主页</a></li>
<li><a href=”column.html”>栏目</a></li>
<li><a href=”column2.html”>栏目二</a></li>
</ul>

通过对比当前页面的URL和菜单的URL来判定该高亮显示哪个菜单。使用也很简单,只需要在页面的</body>标签前添加下面这段JS即可:

<script type=”text/javascript” language=”javascript”>
window.onload=function (){
var nav = document.getElementById(“nav”);
var links = nav.getElementsByTagName(“li”);
var lilen = nav.getElementsByTagName(“a”);
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
var linkurl = lilen[i].getAttribute(“href”);
if(currenturl.indexOf(linkurl)!=-1)
{
last = i;
links[last].className = “current”;
}
}
}
</script>

看到这里,大家应该都明白怎么去高亮当前菜单了,在此就不多言!大家也可以试着用jquery写会更简便些。

另外推荐这种jquery写法,适合跳转到内容时也可以当前高亮显示
<ul>
<li><a href=”/” target=”_self”>首页</a></li>
<li><a href=”/Psy/Jieshao-280000001.html”>个人简介</a></li>
<li><a href=”/Psy/Zhengshu-280000001.html”>资质证书</a></li>
<li><a href=”/Psy/Zixun-280000001.html”>留言咨询</a></li>
<li><a href=”/Psy/Wenzhang-280000001.html”>个人文章</a></li>
<li><a href=”/Psy/Wenzhangli-280000001-2.html”>咨询案例</a></li>
<li><a href=”/Psy/Anli-280000001.html”>问答案例</a></li>
<li><a href=”/Psy/Myphoto-280000001.html”>个人相册</a></li>
<li><a href=”/Psy/Pingjia-280000001.html”>来访者评价</a></li>
</ul>
<script type=”text/javascript”>
$(function(){
//导航选中状态
var url = location.pathname, navg = $(‘.nav li’);
if(url == ‘/’ || url == ‘/index’){
navg.eq(0).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Jieshao’)){
navg.eq(1).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Zhengshu’)){
navg.eq(2).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Zixun’)){
navg.eq(3).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Wenzhang-‘) || !url.indexOf(‘/Psy/Showposts’)){/*!url.indexOf(‘/Psy/Showposts’这里是指跳到内容页时也要加上当前高亮显示*/
navg.eq(4).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Wenzhangli-‘)){
navg.eq(5).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Anli’)){
navg.eq(6).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Myphoto’) || !url.indexOf(‘/Psy/Showps-‘) || !url.indexOf(‘/Psy/Showphoto-‘)){
navg.eq(7).addClass(‘current’);
}else if(!url.indexOf(‘/Psy/Pingjia’)){
navg.eq(8).addClass(‘current’);
}
})
</script>

37 人Likes
  

文章转载请注明:js 当前导航菜单高亮显示-汇聚素材网

本文固定链接:http://www.webhj.com/hj-735.html  +复制链接

目前共有 1 条留言 【 访客:1 条, 博主:0 条 】 访客以 1:0 暂时领先博主!

  1. 沙发
    xiaotianx  

    不错不错,可以收藏一下

    2013 年 10 月 10 日 上午 9:17 @回复

发表评论

*

*

4 + 9

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍