JS网页制作实例,jQuery实现导航高亮的方法_jquery_脚本之家

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

本文实例讲述了jQuery实现导航高亮的方法。分享给大家供大家参考,具体如下:

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

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

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

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

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

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

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

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

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

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

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

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

HTML代码:要注意“rel”

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

  • 首页
  • 作品集
  • 前端库

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

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图