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

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

之前：

之后：

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

html:

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

jq:

$(function($){
    var li=$(".active-title").children("a");
        //遍历所有li
    $(".active-title").find("li").each(function(){

        var str=["like","head","collection","basic","detail"];//这里需要和<li>一一对应，顺序不能颠倒
        var url=window.location.pathname;
　　　　　　　　　　//遍历数组
                for(var i=0;i<str.length;i++){
                    if(url.indexOf(str[i])>0){
                        li.eq(i).children("li").attr("class","active");//加上样式.active
                        return;
                    }
                }    
    })
})    

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

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