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