<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>
default.css
*{
margin:0px;
padding:0px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#div_side_0,#div_side_1
{
float:left;
width:120px;
height:450px;
}
#skin
{
margin:10px;
padding:5px;
width:210px;
padding-right:0px;
list-style:none;
border: 1px solid #CCCCCC;
overflow:hidden;
}
#skin li{
float:left;
margin-right:5px;
width:15px;
height:15px;
text-indent:-999px;
overflow:hidden;
display:block;
cursor:pointer;
background-image:url(theme.gif);
}
#skin_0{
background-position:0px 0px;
}
#skin_1{
background-position:15px 0px;
}
#skin_2{
background-position:35px 0px;
}
#skin_3{
background-position:55px 0px;
}
#skin_4{
background-position:75px 0px;
}
#skin_5{
background-position:95px 0px;
}
#skin_0.selected{
background-position:0px 15px !important;
}
#skin_1.selected{
background-position:15px 15px !important;
}
#skin_2.selected{
background-position:35px 15px !important;
}
#skin_3.selected{
background-position:55px 15px !important;
}
#skin_4.selected{
background-position:75px 15px !important;
}
#skin_5.selected{
background-position:95px 15px !important;
}
.title
{
cursor:pointer;}
h1{
margin:10px;
padding:10px 20px;
width:60px;
color:#ffffff;
font-size:14px;
}
a:link {
text-decoration: none;
color: #333333;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
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;
}
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
//cookie.js插件在前几篇博客里已经提到过,或者百度都可以查到。
<script type="text/javascript">
$(function(){
$("#skin li").click(function(){
$("#"+this.id).addClass("selected").siblings().removeClass("selected");//当前<li>元素被选中
$("#cssfile").attr("href","css/"+(this.id)+".css");//设置不同皮肤
$.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 });//计入cookie
});
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: '/', expires: 10 });
}
});
</script >