利用jquery.cookie.js来更换网站的皮肤

最新推荐文章于 2018-06-11 14:16:00 发布

砺雪凝霜

最新推荐文章于 2018-06-11 14:16:00 发布

阅读量67

点赞数

分类专栏： java基础文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/haogangshang/article/details/88290947

版权

java基础专栏收录该内容

96 篇文章 0 订阅

订阅专栏

[color=red]说明：要注意cookie路径的问题，代码目前只能放在项目的根路径下才能成功的显示上一次更改后的皮肤。建议把代码贴在elipse下运行。[/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>网页皮肤变换</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<link href="css/skin_0.css" rel="stylesheet" type="text/css"
id="cssfile" />
<style>
#main {
width: 500px;
height: 180px;
border: 1px solid #F00;
}

#skin {
list-style-type: none;
margin: 0px;
padding: 0px;
}

li {
margin: 12px;
padding: 1px;
float: left;
width: 45px;
height: 20px;
cursor: pointer;
}

li.selected {
background-color: #808080;
text-align: center;
}

#div_side_0 {
margin-top: 30px;
margin-left: 20px;
margin-bottom: 20px;
margin-right: 20px;
padding: 0 10 0 10px;
border: 1px solid #F00;
width: 100px;
height: 45px;
float: left;
border-color: blue;
}

#div_side_1 {
margin-top: 30px;
margin-left: 20px;
margin-bottom: 40px;
padding: 0 0 0 10px;
border: 1px solid #F00;
width: 100px;
height: 45px;
float: left;
}

#news {
width: 100px;
padding: 0 0 0 0;
height: 45px;
margin: 0 auto;
}

.title {
text-align: centre;
margin: 0 auto;
width: 80px;
line-height: 45px;
}
</style>
<body>
<div id="main">
<div style="height: 30px; padding-top: 20px;">
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">
灰色
</li>
<li id="skin_1" title="紫色">
紫色
</li>
<li id="skin_2" title="红色">
红色
</li>
<li id="skin_3" title="天蓝">
天蓝
</li>
<li id="skin_4" title="橙色">
橙色
</li>
<li id="skin_5" title="淡绿色">
绿色
</li>
</ul>
</div>
<script type="text/javascript">

$(function() {
var $skin_li = $("#skin").find("li");
$skin_li.click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
$("#cssfile").attr("href", "css/" + (this.id) + ".css");
$.cookie("MyCssSkin", this.id, {
path : '/',
expries : 10
});
});
var cookie_skin = $.cookie("MyCssSkin");
if (cookie_skin) {
$("#" + cookie_skin).addClass("selected").siblings().removeClass(
"selected");
$("#cssfile").attr("href", "css/" + cookie_skin + ".css");
$.cookie("MyCssSkin", cookie_skin, {
path : '/',
expries : 10
});
}
});
</script>
<div id="div_side_0">
<div id="news">
<p class="title">
新闻事实
</p>
</div>
</div>
<div id="div_side_1">
<div id="game">
<p class="title">
娱乐新闻
</p>
</div>
</div>

</div>
</body>

</html>

砺雪凝霜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用jquery.cookie.js来更换网站的皮肤

网页皮肤变换 #main { width: 500px; height: 180px; border: 1px solid #F00;}#skin { list-style-type: none; margin: 0px; padding: 0px;}li { margin: 12px; padding: 1px; float: left; width: 45px; height: 20
复制链接

扫一扫