利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式

浏览数：32 / 时间：2015年06月09日

如何给页面导航栏的选中栏目添加特殊样式，一直没怎么搞清楚，今天学习了一下，并做个总结。
这边有两种情况，一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即时刷新页面后样式仍然有效。
直接上代码：
第一种情况：

<script type="text/javascript" src="templets/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav a").each(function(){
        $(this).click(function(){
            $(".nav .hover").removeClass("hover");
            $(this).addClass("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="templets/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");
        }
    });
});
</script>

<div class="nav">
<ul>
    <li><a href="1.html"> 首页</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>

第二种情况也可见案例：http://download.csdn.net/detail/moqiang02/6543801（下载不需积分，希望大家一起交流学习）

$(document).ready(function () {

$(‘.footer li a‘).each(function () {

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

$(this).addClass(‘currentA‘).attr(‘href‘, ‘javascript:void(0);‘);

});

})

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

利用Jquery给当前页或者跳转后页面的导航栏添加选中后样式