首页 > 代码库 > Jquery给当前页或者跳转后页面的导航栏添加选中后样式

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

2024-07-06 11:39:25   226人阅读

解决方法有两种：一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即使刷新页面后样式仍然有效。

直接上代码：

第一种情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>

 

第二种情况：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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=http://www.mamicode.com/=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> 

 


联系
我们