<Body> <ulID= "Skin"> <binID= "Skin_0"title= "Gray"class= "Selected">Grey</Li> <LiID= "Skin_1"title= "Purple">Purple</Li> <LiID= "Skin_2"title= "Red">Red</Li> <LiID= "Skin_3"title= "Turquoise">Azure</Li> <LiID= "Skin_4"title= "Orange">Orange</Li> <binID= "Skin_5"title= "Light green">Light Green</Li> </ul> <DivID= "Div_side_0"> <DivID= "News"> <H1class= "title">Current News</H1> </Div> </Div> <DivID= "Div_side_1"> <DivID= "Game"> <H1class= "title">Entertainment News</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.cssh1{background:#999999;}Skin_1.cssh1{background:#BB3BD9;}Skin_2.cssh1{background:#E31559;}Skin_3.cssh1{background:#08BECE;}Skin_4.cssh1{background:#FBA60A;}Skin_5.cssh1{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 Plugin has been mentioned in previous blogs, or Baidu can be found. <script type= "Text/javascript" >$(function(){ $("#skin li"). Click (function(){ $("#"+ This. ID). addclass ("selected"). Siblings (). Removeclass ("selected");//The current <li> element is selected$ ("#cssfile"). attr ("href", "css/" + ( This. ID) + ". css");//set different skins$.cookie ("Mycssskin", This. ID, {path: '/', expires:10});//crediting Cookies }); varCookie_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 >
Use JQ and add cookies on Web pages for skin resurfacing