您的位置:首页 > Web前端 > JQuery

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

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

<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(下载不需积分,希望大家一起交流学习)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: