解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失;另一种情况是即使刷新页面后样式仍然有效。
直接上代码:
第一种情况:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<code><</code><code>script</code>
<code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"templets/js/jquery.js"</code><code>></</code><code>script</code><code>> </code>
<code>type</code><code>=</code><code>"text/javascript"</code><code>> </code>
<code>$(document).ready(function(){ </code>
<code> </code><code>$(".nav a").each(function(){ </code>
<code> </code><code>$(this).click(function(){ </code>
<code> </code><code>$(".nav .hover").removeClass("hover"); </code>
<code> </code><code>$(this).addClass("hover"); </code>
<code> </code><code>return false;//防止页面跳转 </code>
<code> </code><code>}); </code>
<code> </code><code>}); </code>
<code>}); </code>
<code></</code><code>script</code><code>> </code>
<code> </code>
<code><</code><code>div</code> <code>class</code><code>=</code><code>"nav"</code><code>> </code>
<code><</code><code>ul</code><code>> </code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code>
<code>href</code><code>=</code><code>"1.html"</code> <code>class</code><code>=</code><code>"hover"</code><code>> 首页</</code><code>a</code><code>></</code><code>li</code><code>> </code>
<code>href</code><code>=</code><code>"2.html"</code><code>> 个人资料</</code><code>a</code><code>></</code><code>li</code><code>> </code>
<code>href</code><code>=</code><code>"3.html"</code><code>> 我的好友</</code><code>a</code><code>></</code><code>li</code><code>> </code>
<code>href</code><code>=</code><code>"4.html"</code><code>> 消息管理</</code><code>a</code><code>></</code><code>li</code><code>> </code>
<code></</code><code>ul</code><code>> </code>
<code></</code><code>div</code><code>></code>
第二种情况:
<code> </code><code>$this = $(this); </code>
<code> </code><code>if($this[0].href==String(window.location)){ </code>
<code> </code><code>$this.addClass("hover"); </code>
<code> </code><code>} </code>
<code>href</code><code>=</code><code>"1.html"</code><code>> 首页</</code><code>a</code><code>></</code><code>li</code><code>> </code>
<code></</code><code>div</code><code>> </code>