解决方法有两种：一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即使刷新页面后样式仍然有效。
直接上代码：
第一种情况：
|
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==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> |