jQuery實現無重新整理切換主題面板功能
主題面板切換功能在很多網站和系統中應用，使用者可以根據此功能設定自己喜歡的主題顏色風格，增強了使用者體驗。本文將圍繞如何使用jQuery實現點選無重新整理切換主題面板功能。
檢視演示DEMO：https://www.helloweba.net/demo/style-switch/
實現該功能的原理就是通過點選定義的主題樣式，改變頁面當前引用的主題CSS檔案，並且將當前的主題樣式寫入cookie中或者寫入資料庫中，以便下次該使用者重新訪問頁面時，呼叫的就是上次設定好的主題樣式。
準備主題面板樣式
首先，我準備了三個樣式表CSS檔案，分別是三種風格的主題面板，將其引入頁面，放置在頁面的<head>之間。
<link title="default" rel="stylesheet" type="text/css" href="css/default.css" /> <link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" /> <link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" /> 
注意我給每個<link>添加了title屬性，是由用處的，另外我禁用了第2個和第3個CSS檔案，就是預設起作用的是第1個CSS檔案。
XHTML
<ul id="styles">
<li id="default">經典</li> <li id="blue">淡藍</li> <li id="brown">棕色</li> </ul> 三種主題風格用於點選切換，注意我分別給每個li加了id屬性。
CSS
ul#styles{margin-top:10px} ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px; margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer} ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif); background-repeat:no-repeat; background-position:4px 32px} ul#styles li#default{background-color:#162934;} ul#styles li#blue{background-color:#90c5e7} ul#styles li#brown{background-color:#601f00}
用CSS渲染XHTML，其中ul#styles li.cur是指當前主題選中下的樣式，我用一個小勾表示當前選中的主題。
jQeury
首先我們要引入jquery庫和jquery.cookie外掛。jquery.cookie外掛為jQuery提供了強大的cookie操作功能，你不用去寫複雜的原生的javascript，只管直接呼叫該外掛就行。關於該外掛的使用，請閱讀本站文章：使用jQuery操作Cookies
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> 接下來，當用戶點選切換選擇主題時，要發生以下動作：獲取選擇的主題（id），檢視引用的CSS檔案，如果發現其title屬性值正好與當前選中的主題id值相等，則應用該主題CSS檔案，同時將其他引用的CSS檔案禁用，並且將當前選中的主題寫入cookie中，設定cookie過期時間，最後將當前選中的主題按鈕（li）設定為當前選中狀態。具體看下面的程式碼：
$("#styles li").click(function(){
var style = $(this).attr("id"); $("link[title='"+style+"']").removeAttr("disabled"); $("link[title!='"+style+"']").attr("disabled","disabled"); $.cookie("mystyle",style,{expires:30}); $(this).addClass("cur").siblings().removeClass("cur"); }); 注意，在本例中我將選中的樣式儲存在使用者cookie中，cookie名稱為”mystyle“，值為當前選中的主題值，過去時間為30天，即：expires:30
接著需要做的是頁面載入時，讀取主題cookie值，如果主題cookie存在則呼叫cookie值對應的主題樣式CSS檔案，並且設定當前主題按鈕狀態為選中狀態，反之，則呼叫預設樣式。程式碼如下：
var cookie_style = $.cookie("mystyle");
if(cookie_style==null){
$("link[title='default']").removeAttr("disabled"); $("#styles li#default").addClass("cur"); }else{ $("link[title='"+cookie_style+"']").removeAttr("disabled"); $("#styles li[id='"+cookie_style+"']").addClass("cur"); $("link[title!='"+cookie_style+"']").attr("disabled","disabled"); } 將以上兩段程式碼加入到$(function(){})中，工作到此完成，去看看效果吧。
值得一提的是，本文應用的cookie記錄使用者所選擇設定的主題面板樣式，但是當cookie到期或者使用者清除了瀏覽器的COOKIE，亦或者使用者換用其他瀏覽器瀏覽時，當前設定的主題就會失效。為了讓使用者永久儲存選擇的主題樣式，必須將所選的主題與使用者資訊對應，並寫入資料庫，下次該使用者登入就可以直接讀取主題，當然，該方法應用在有使用者許可權範圍的系統，如後臺管理系統，個人中心等。