有時候一個網頁可以有多個皮膚進行選擇，也就是不同的背景，或是一整套新的css，能使整個頁面變成另一種風格。
這個功能可以用jQuery來實現。外加cookie插件。有了cookie，就可以長時間的保存選擇后的背景樣式，而不至於每次刷新界面都會轉入默認的畫面。
效果如下：
代碼之div+css研讀：
<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>
#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;//
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，並且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
} #skin li{ float:left; margin-right:5px; width:15px; height:15px; text-indent:-999px;/*text-indent是用來設定文本塊中第一行的縮進*/ overflow:hidden; display:block; /*
none 此元素不會被顯示。
block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
*/ 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; }
在html部分，通過一個ul、li來進行導航的布局。兩個div進行內容的布局。在ul中設置了margin、padding、width、list-style、border、overflow等值。
在li中設置了float、width、height等。這里的背景圖片用的很巧妙。
background-position 屬性設置背景圖像的起始位置。
這個屬性設置背景原圖像（由 background-image 定義）的位置，背景圖像如果要重復，將從這一點開始。巧妙的利用了position+位置的組合。
當選中時，x位置不變，y位置向下移動15px，這樣就會出現打鈎的那個畫面。這種處理非常之巧妙。
用一個圖片，解決了很多問題。
下面進行jQuery代碼的研讀
版本一：
<script type="text/javascript"> //<![CDATA[ $(function(){ var $li =$("#skin li"); $li.click(function(){ $("#"+this.id).addClass("selected") //當前<li>元素選中，this是js對象，$(this)是jQuery對象。 .siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中 $("#cssfile").attr("href","css/"+this.id+".css"); //設置不同皮膚 }) }) //]]> </script>
這里是簡單的實現了效果，更換按鈕，更換皮膚。
但是並沒有實現cookie。
這段代碼主要實現兩個動作，一個是變換按鈕的選中狀態，一個是改變相應的皮膚css。通過js對象this獲得標簽為this.id的jQuey對象，這種處理也很巧妙。
另一個，將css文件名命名與屬性id相結合，也很巧妙。
修改cssfile的屬性值href為新的css。
版本二：
<script type="text/javascript"> //<![CDATA[ $(function(){ var $li =$("#skin li"); $li.click(function(){ $("#"+this.id).addClass("selected") //當前<li>元素選中 .siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中 $("#cssfile").attr("href","css/"+ (this.id) +".css"); //設置不同皮膚 $.cookie( "MyCssSkin" , this.id , { path: '/', expires: 10 }); }); var cookie_skin = $.cookie( "MyCssSkin");//將MyCssSkin這個cookie值this.id賦給變量cookie_skinif (cookie_skin) { $("#"+cookie_skin).addClass("selected") //當前<li>元素選中 .siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中 $("#cssfile").attr("href","css/"+ cookie_skin +".css"); //設置不同皮膚 $.cookie( "MyCssSkin" , cookie_skin , { path: '/', expires: 10 }); } }) //]]> </script>
這里面多了一個動作，就是設置了cookie。
然后通過cookie值是否存在來做出相應的動作，如果cookie值存在，就直接將皮膚設為cookie值的值。
這里用到的是jQuery的cookie插件。
jQuery操作cookie的插件,大概的使用方法如下
$.cookie('the_cookie'); //讀取Cookie值
$.cookie(’the_cookie’, ‘the_value’); //設置cookie的值
$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一個cookie 包括有效期 路徑 域名等
$.cookie(’the_cookie’, ‘the_value’); //新建cookie
$.cookie(’the_cookie’, null); //刪除一個cookie
不過這段代碼不好的地方，就是有大量的重復代碼，可以模塊化，函數化。這也是代碼優化的一種。
版本三：
<script type="text/javascript"> //<![CDATA[ $(function(){ var $li =$("#skin li"); $li.click(function(){ switchSkin( this.id ); }); var cookie_skin = $.cookie( "MyCssSkin");//優化了代碼，將功能模塊化了 if (cookie_skin) { switchSkin( cookie_skin ); } }); function switchSkin(skinName){ $("#"+skinName).addClass("selected") //當前<li>元素選中 .siblings().removeClass("selected"); //去掉其它同輩<li>元素的選中 $("#cssfile").attr("href","css/"+ skinName +".css"); //設置不同皮膚 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); } //]]> </script>
用到就調用函數，參數變化即可。