jquery 更换皮肤
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title></title> 5 <link href="css/default.css" rel="stylesheet" type="text/css" /> 6 <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> 7 <!-- 引入jQuery --> 8 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 9 <!-- 引入jQuery的cookie插件 使用说明：http://www.jb51.net/article/44181.htm --> 10 <script src="js/jquery.cookie.js" type="text/javascript"></script> 11 <script type="text/javascript"> 12 //<![CDATA[ 13 $(function(){ 14 var $li =$("#skin li"); 15 $li.click(function(){ 16 $("#"+this.id).addClass("selected") //当前<li>元素选中 17 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 18 $("#cssfile").attr("href","css/"+ (this.id) +".css"); //设置不同皮肤 19 $.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 }); 20 }); 21 var cookie_skin = $.cookie( "MyCssSkin"); 22 if (cookie_skin) { 23 $("#"+cookie_skin).addClass("selected") //当前<li>元素选中 24 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 25 $("#cssfile").attr("href","css/"+ cookie_skin +".css"); //设置不同皮肤 26 $.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 }); 27 } 28 }) 29 //]]> 30 </script> 31 </head> 32 <body> 33 <ul id="skin"> 34 <li id="skin_0" title="灰色" class="selected">灰色</li> 35 <li id="skin_1" title="紫色">紫色</li> 36 <li id="skin_2" title="红色">红色</li> 37 <li id="skin_3" title="天蓝色">天蓝色</li> 38 <li id="skin_4" title="橙色">橙色</li> 39 <li id="skin_5" title="淡绿色">淡绿色</li> 40 </ul> 41 42 <div id="div_side_0"> 43 <div id="news"> 44 <h1 class="title">时事新闻</h1> 45 </div> 46 </div> 47 48 <div id="div_side_1"> 49 <div id="game"> 50 <h1 class="title">娱乐新闻</h1> 51 </div> 52 </div> 53 54 </body> 55 </html>
优化后代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title></title> 5 <link href="css/default.css" rel="stylesheet" type="text/css" /> 6 <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> 7 <!-- 引入jQuery --> 8 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 9 <!-- 引入jQuery的cookie插件 --> 10 <script src="js/jquery.cookie.js" type="text/javascript"></script> 11 <script type="text/javascript"> 12 //<![CDATA[ 13 $(function(){ 14 var $li =$("#skin li"); 15 $li.click(function(){ 16 switchSkin( this.id ); 17 }); 18 var cookie_skin = $.cookie( "MyCssSkin"); 19 if (cookie_skin) { 20 switchSkin( cookie_skin ); 21 } 22 }); 23 function switchSkin(skinName){ 24 $("#"+skinName).addClass("selected") //当前<li>元素选中 25 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 26 $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤 27 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); 28 } 29 //]]> 30 </script> 31 </head> 32 <body> 33 <ul id="skin"> 34 <li id="skin_0" title="灰色" class="selected">灰色</li> 35 <li id="skin_1" title="紫色">紫色</li> 36 <li id="skin_2" title="红色">红色</li> 37 <li id="skin_3" title="天蓝色">天蓝色</li> 38 <li id="skin_4" title="橙色">橙色</li> 39 <li id="skin_5" title="淡绿色">淡绿色</li> 40 </ul> 41 42 <div id="div_side_0"> 43 <div id="news"> 44 <h1 class="title">时事新闻</h1> 45 </div> 46 </div> 47 48 <div id="div_side_1"> 49 <div id="game"> 50 <h1 class="title">娱乐新闻</h1> 51 </div> 52 </div> 53 54 </body> 55 </html>
default。css
1 *{ 2 margin:0px; 3 padding:0px; 4 } 5 body { 6 font-family: Verdana, Arial, Helvetica, sans-serif; 7 font-size: 12px; 8 } 9 #div_side_0,#div_side_1 10 { 11 float:left; 12 width:120px; 13 height:450px; 14 } 15 #skin 16 { 17 margin:10px; 18 padding:5px; 19 width:210px; 20 padding-right:0px; 21 list-style:none; 22 border: 1px solid #CCCCCC; 23 overflow:hidden; 24 } 25 #skin li{ 26 float:left; 27 margin-right:5px; 28 width:15px; 29 height:15px; 30 text-indent:-999px; 31 overflow:hidden; 32 display:block; 33 cursor:pointer; 34 background-image:url(theme.gif); 35 } 36 #skin_0{ 37 background-position:0px 0px; 38 } 39 #skin_1{ 40 background-position:15px 0px; 41 } 42 #skin_2{ 43 background-position:35px 0px; 44 } 45 #skin_3{ 46 background-position:55px 0px; 47 } 48 #skin_4{ 49 background-position:75px 0px; 50 } 51 #skin_5{ 52 background-position:95px 0px; 53 } 54 #skin_0.selected{ 55 background-position:0px 15px !important; 56 } 57 #skin_1.selected{ 58 background-position:15px 15px !important; 59 } 60 #skin_2.selected{ 61 background-position:35px 15px !important; 62 } 63 #skin_3.selected{ 64 background-position:55px 15px !important; 65 } 66 #skin_4.selected{ 67 background-position:75px 15px !important; 68 } 69 #skin_5.selected{ 70 background-position:95px 15px !important; 71 } 72 .title 73 { 74 cursor:pointer;} 75 h1{ 76 margin:10px; 77 padding:10px 20px; 78 width:60px; 79 color:#ffffff; 80 font-size:14px; 81 } 82 a:link { 83 text-decoration: none; 84 color: #333333; 85 } 86 a:visited { 87 color: #333333; 88 text-decoration: none; 89 } 90 a:hover { 91 color: #000000; 92 text-decoration: underline; 93 }
skin_0.css:
h1{
background:#999999;
}
skin_1.css:
h1{
background:#BB3BD9;
}
......
