以下讲述中有4个文件：skin.html、blue.css、green.html、red.html，我都放在同一目录下。
1、skin.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
>
<
head
>
<
head
>
<
title
>皮肤切换演示</
title
>
<!--引用百度CDN的jquery-->
<
script
language
=
"javascript"
type
=
"text/javascript"
src
=
"http://libs.baidu.com/jquery/1.9.1/jquery.min.js"
></
script
>
<
link
href
=
"blue.css"
id
=
"skincss"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
>
$(document).ready(function(){
//切换皮肤
$('#skin_list').change(function(){
skin_name = $(this).val()
skin_ skin_name + ".css"
$("#skincss").attr("href", skin_href)
});
});
</
script
>
</
head
>
</
head
>
<
body
>
<!--皮肤列表-->
<
div
>
皮肤列表:
<
select
id
=
"skin_list"
>
<
option
value
=
"blue"
>蓝色</
option
>
<
option
value
=
"green"
>绿色</
option
>
<
option
value
=
"red"
>红色</
option
>
</
select
>
</
div
>
<
div
>
<
ul
>
<
li
>今天</
li
>
<
li
>心情</
li
>
<
li
>不错</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
|
重点只有一个，就是那几行JavaScript代码。为了让大家看到全貌，所以将整个html代码贴了出来。
2、blue.css
|
1
|
li {
color
:
blue
;}
|
3、green.css
|
1
|
li {
color
:
green
;}
|
4、red.css
|
1
|
li {
color
:
red
;}
|
可能有网友觉得一句话还搞毛css文件，这里是以小见大，见笑了。^_^
5、截图
本文转自walker snapshot博客51CTO博客，原文链接http://blog.51cto.com/walkerqt/1221223如需转载请自行联系原作者
RQSLT
