解決方法有兩種:一種是直接給當前頁面添加特殊樣式,當網頁刷新或者跳轉到下一頁后,樣式消失;另一種情況是即使刷新頁面后樣式仍然有效。
直接上代碼:
第一種情況:
|
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
>
|
