<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 >
