Skip to content

Commit d357f66

Browse files
coderpwh1024coderpwh1024
authored
Add files via upload
1 parent aadc81a commit d357f66

File tree

2 files changed

+111
-0
lines changed

2 files changed

+111
-0
lines changed

‎jquery/ch5/demo11-网页换肤/demo1.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>网页换肤</title>
6+
<meta http-equiv="content-type"content="text/html;charset=utf-8"/>
7+
<title></title>
8+
<link href="css/default.css" rel="stylesheet" type="text/css" />
9+
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
10+
<!-- 引入jQuery -->
11+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
12+
<!-- 引入jQuery的cookie插件 -->
13+
<script src="js/jquery.cookie.js" type="text/javascript"></script>
14+
<script type="text/javascript">
15+
$(document).ready(function(){
16+
var $li = $("#skin li"); // 何种选择器？
17+
$li.click(function () {
18+
$("#"+this.id).addClass("selected").siblings().removeClass("selected");
19+
$("#cssfile").attr("href","css/"+this.id+".css"); // 设置不同皮肤
20+
// $.cookie("MyCssSkin",this.id,{ path: '/',expires: 10});
21+
$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 });
22+
});
23+
var cookie_skin = $.cookie("MyCssSkin");
24+
if(cookie_skin){
25+
$("#"+cookie_skin).addClass("selected").siblings().removeClass("selected");
26+
$("#cssfile").attr("href","css/"+cookie_skin+".css"); // 设置换不同皮肤
27+
$.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 });
28+
}
29+
30+
31+
})
32+
</script>
33+
34+
</head>
35+
<body>
36+
<ul id="skin">
37+
<li id="skin_0" title="灰色" class="selected">灰色</li>
38+
<li id="skin_1" title="紫色">紫色</li>
39+
<li id="skin_2" title="红色">红色</li>
40+
<li id="skin_3" title="天蓝色">天蓝色</li>
41+
<li id="skin_4" title="橙色">橙色</li>
42+
<li id="skin_5" title="淡绿色">淡绿色</li>
43+
</ul>
44+
<div id="div_side_0">
45+
<div id="news">
46+
<h1 class="title">时事新闻</h1>
47+
</div>
48+
</div>
49+
<div id="div_side_1">
50+
<div id="game">
51+
<h1 class="title">娱乐新闻</h1>
52+
</div>
53+
</div>
54+
</body>
55+
</html>

‎jquery/ch5/demo11-网页换肤/demo2.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>网页换肤</title>
6+
<meta http-equiv="content-type"content="text/html;charset=utf-8"/>
7+
<title></title>
8+
<link href="css/default.css" rel="stylesheet" type="text/css" />
9+
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
10+
<!-- 引入jQuery -->
11+
<script src="../../scripts/jquery.js" type="text/javascript"></script>
12+
<!-- 引入jQuery的cookie插件 -->
13+
<script src="js/jquery.cookie.js" type="text/javascript"></script>
14+
<script type="text/javascript">
15+
$(document).ready(function () {
16+
var $li = $("#skin li");
17+
$li.click(function () {
18+
switchSkin(this.id);
19+
})
20+
var cookie_skin = $.cookie("MyCssSkin");
21+
if(cookie_skin){
22+
switchSkin(cookie_skin);
23+
}
24+
});
25+
function switchSkin(skinName) {
26+
$("#"+skinName).addClass("selected") //当前<li>元素选中
27+
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中
28+
$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
29+
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
30+
}
31+
32+
</script>
33+
34+
35+
</head>
36+
<body>
37+
<ul id="skin">
38+
<li id="skin_0" title="灰色" class="selected">灰色</li>
39+
<li id="skin_1" title="紫色">紫色</li>
40+
<li id="skin_2" title="红色">红色</li>
41+
<li id="skin_3" title="天蓝色">天蓝色</li>
42+
<li id="skin_4" title="橙色">橙色</li>
43+
<li id="skin_5" title="淡绿色">淡绿色</li>
44+
</ul>
45+
<div id="div_side_0">
46+
<div id="news">
47+
<h1 class="title">时事新闻</h1>
48+
</div>
49+
</div>
50+
<div id="div_side_1">
51+
<div id="game">
52+
<h1 class="title">娱乐新闻</h1>
53+
</div>
54+
</div>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)