码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-09 13:38:39      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

具体的样式有两种情况,一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。
直接上代码:
第一种情况:
在CODE上查看代码片派生到我的代码片
<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>  
 
第二种情况:
在CODE上查看代码片派生到我的代码片
<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> 

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

标签:

原文地址:http://www.cnblogs.com/tnnyang/p/4409369.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!