jquery 给当前页面或者跳转后页面对应的导航栏添加选中样式

用jquery js 给当前页面或者跳转后页面对应的导航栏添加选中样式是项目中很常见的的效果，几乎每个网站都会用到，
这里有两种效果，一种是直接给当前页面对应的导航栏添加样式，当页面刷新或者跳转页面后样式会消失！ 另一种效果是即使刷新页面或者页面跳转以后导航栏选中样式仍然存在有效！

第一种效果：

<script type="text/javascript" src="js/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

    $(".nav a").each(function(){  

        $(this).click(function(){  

            $(".nav a").removeClass("hover");  

            $(this).addClass("hover"); //hover表示被选中效果的类名   

            return false;//防止页面跳转  

        });  

    });  

});  

</script>



<div class="nav">  

    <ul>  

        <li><a href="1.html" class="hover"> 首页</a></li>  

        <li><a href="2.html"> 用户中心</a></li>  

        <li><a href="3.html"> 关于我们</a></li>  

        <li><a href="4.html"> 联系我们</a></li>   

    </ul>     

</div>    

第二种效果：

<script type="text/javascript" src="js/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

    $(".nav a").each(function(){  

        $this = $(this);  

        if($this[0].href==String(window.location)){  

            $this.addClass("hover");  //hover表示被选中效果的类名   

        }  

    });  

});  

</script>  



<div class="nav">  
    <ul>  

        <li><a href="1.html" class="hover"> 首页</a></li>  

        <li><a href="2.html"> 用户中心</a></li>  

        <li><a href="3.html"> 关于我们</a></li>  

        <li><a href="4.html"> 联系我们</a></li>   

    </ul>      

</div>