黄锦诚的个人博客--有志者是锦诚!

JS实现导航高亮方法

  导航是我们页面中一般都需要的一个元素,它可以说是一个站点必用的元素,没有了导航,会让人找不着北,但有时候,仅仅有了导航还不够,还需要在当前的页面中标明当前是在哪一个类别里面,这时候就有了不同的实现的方法,也就有了下文的一些介绍。

  通常,我们在做导航的时候,都是由程序直接输出当前的页面的的高亮状态的样式,我们只需要定义好输出的类的高亮的样式就可以了,这样是最直接有效也是最常用的方法。

  像Wordpress的导航输出,会自动输出一个高亮的类的“current”,如下图:

wordpress导航输出一个current的类

  但有时候,我们在程序里进行包含的文件的时候,如统一的头部和底部,这时候统一的头部中有一个这样的导航,如果粗心的程序员没有无法给目前所在的目录或文件输出一个高亮的类的时候,或者有时候实现起来非常麻烦的时候,能不能有一些其实的方法来实现和补救呢?

  答案是肯定的,那就是JS。

  但这个根据怎样的规则给当前的这个目录或文件实现高亮呢?

  最近刚好也在项目中遇到这个问题,所以通过一番的折腾,实现了效果。

  我的思路是这样的,先找到当前的URL的路径,然后URL中的最后的一个文件名或目录和导航中元素的某个属性来进行匹配,匹配成功的就加上高亮的类,把别的不是当前匹配的类的高亮样式去掉,不成功的时候就返回到首页这个来进行高亮。

  于是就有了下面的代码,经试验,无论是文件或是目录都可匹配成功:

THML:

  1. <ul class="menu" id="menu">
  2.  <li><a title="首页" href="index.html" rel="index.html">首页</a></li>
  3.  <li ><a title="作品集" href="works.html" rel="works.html">作品集</a></li>
  4.  <li><a title="前端库" href="web.html" rel="web.html">前端库</a></li>
  5. </ul>

js代码:

  1. <script type="text/javascript">
  2.   var urlstr = location.href;
  3.   var urlstatus=false;
  4.   $("#menu a").each(function () {
  5.     if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
  6.       $(this).addClass('cur'); urlstatus = true;
  7.     } else {
  8.       $(this).removeClass('cur');
  9.     }
  10.   });
  11.   if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
  12. </script>

  不要忘了,该脚本是基于Jquery的。

  具体的效果可以看DEMO,点击打开

  感谢你的阅读,欢迎测试!



4条评论

  1. 这也要名字说道:

    :?: 感觉好像没甚么用用在滑动门之类估计还好,用在导航,直接跳转到另一个页面了,样式也就归回原位了

    • 这也要名字说道:

      不好意思,没看清楚,我弄下来研究研究,这个效果很好,谢谢分享

  2. 苏云说道:

    这JS实现导航高亮方法 的 Jquery 在哪啊! :eek:



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

黄锦诚 腾讯微博
黄锦诚,专注前端、分享生活、记录工作、关于一切,这里有不一样的惊喜!

分类

Wopus主机优惠码

无觅相关文章插件,快速提升流量