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


当鼠标选中页面导航栏的某一栏目后,如何给选中栏目添加特殊样式?

这边有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。

直接上代码:

第一种情况:

<script>  
$(document).ready(function(){  
    $(".nav a").each(function(){  
        $(this).click(function(){  
            $(".nav .hover").removeClass("hover");  
            $(this).addClass("hover");    
            return false;//防止页面跳转  
        });  
    });  
});  
</script>

<pre class="html" name="code"><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 ">  
$(document).ready(function(){  
    $(".nav a").each(function(){  
        $this = $(this);  
        if($this[0].href==String(window.location)){  
            $this.addClass("hover");  
        }  
    });  
});  
</script>

<pre class="html" name="code"><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(下载不需积分,希望大家一起交流学习)

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值