skin_0.css:
h1{
background:#999999;
}
skin_1.css
h1{
background:#BB3BD9;
}
skin_2.css
h1{
background:#E31559;
}
skin_3.css
h1{
background:#08BECE;
}
skin_4.css
h1{
background:#FBA60A;
}
skin_5.css
h1{
background:#AFD400;
}
html代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
<script src="JS/jquery-1.3.2.js" type="text/javascript"></script>
<script src="JS/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $li = $("#skin li");
$li.click(function() {
switchSkin(this.id)
});
//获取cookie存入的值
var cookie_skin = $.cookie("MyCssSkin");
//如果cookie存在
if (cookie_skin) {
switchSkin(cookie_skin);
}
});
function switchSkin(skinName) {
//添加li选中的样式
$("#" + skinName).addClass("selected")
//去掉其它同辈的<li>元素的选中
.siblings().removeClass("selected");
$("#cssfile").attr("href", "css/" + skinName + ".css");//设置不同皮肤
$.cookie("MyCssSkin", skinName, { path: '/', expires: 10 });
}
</script>
</head>
<body>
<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 id="div_side_0">
<div id="news">
<h1 class="title">
时事新闻</h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title">
时事新闻</h1>
</div>
</div>
</body>
</html>