jq遍历url判断是否为当前页面然后给导航上色

举例：我们希望在此页面点击“我的头像”从而加亮它的背景颜色，跟“我的爱好”的背景颜色一样。

之前：

之后：

我是这样实现的：通过判断当前url是否存在某字段，遍历字段所在的位置给加上相应的样式，我这么说可能比较难理解，看看代码吧。

html:

1 <ul class="active-title">
2         <a href="/like"><li >兴趣爱好</li></a>
3         <a href="/head"><li>我的头像</li></a>
4         <a href="/collection"><li >我的收藏</li></a>
5         <a href="/basic"><li >基本资料</li></a>
6         <a href="/details"><li>详细资料</li></a>
7 </ul>

jq:

 1 $(function($){
 2     var li=$(".active-title").children("a");
 3         //遍历所有li
 4     $(".active-title").find("li").each(function(){
 5 
 6         var str=["like","head","collection","basic","detail"];//这里需要和<li>一一对应，顺序不能颠倒
 7         var url=window.location.pathname;
 8 　　　　　　　　　　//遍历数组
 9                 for(var i=0;i<str.length;i++){
10                     if(url.indexOf(str[i])>0){
11                         li.eq(i).children("li").attr("class","active");//加上样式.active
12                         return;
13                     }
14                 }    
15     })
16 })

是不是挺简单的？有别的方法可以和博主讨论哦。

以前发过一个类似的，原理是通过点击事件切换样式，原文地址：http://www.cnblogs.com/mrcln/p/3870499.html，有点弊端，具体就不多说了，所以还是比较推荐本文的。