主題皮膚切換功能在很(hěn)多(duō)網站(zhàn)和(hé)系統中應用，用戶可(kě)以根據此功能設置自己喜歡的主題顔色風格，增強了用戶體(tǐ)驗。本文将圍繞如何使用jQuery實現點擊無刷新切換主題皮膚功能。

實現該功能的原理(lǐ)就是通(tōng)過點擊定義的主題樣式，改變頁面當前引用的主題CSS文件，并且将當前的主題樣式寫入cookie中或者寫入數(shù)據庫中，以便下次該用戶重新訪問頁面時(shí)，調用的就是上(shàng)次設置好的主題樣式。

準備主題皮膚樣式

首先，我準備了三個(gè)樣式表CSS文件，分别是三種風格的主題皮膚，将其引入頁面，放置在頁面的之間(jiān)。

注意我給每個(gè)添加了title屬性，是由用處的，另外我禁用了第2個(gè)和(hé)第3個(gè)CSS文件，就是默認起作(zuò)用的是第1個(gè)CSS文件。

XHTML

	
	

		經典
	

	

		淡藍(lán)
	

	

		棕色
	

三種主題風格用于點擊切換，注意我分别給每個(gè)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是指當前主題選中下的樣式，我用一個(gè)小(xiǎo)勾表示當前選中的主題。

jQeury

首先我們要引入jquery庫和(hé)jquery.cookie插件。jquery.cookie插件為(wèi)jQuery提供了強大(dà)的cookie操作(zuò)功能，你(nǐ)不用去寫複雜的原生(shēng)的javascript，隻管直接調用該插件就行(xíng)。關于該插件的使用，請(qǐng)閱讀本站(zhàn)文章：使用jQuery操作(zuò)Cookies

接下來(lái)，當用戶點擊切換選擇主題時(shí)，要發生(shēng)以下動作(zuò)：獲取選擇的主題（id），查看引用的CSS文件，如果發現其title屬性值正好與當前選中的主題id值相等，則應用該主題CSS文件，同時(shí)将其他引用的CSS文件禁用，并且将當前選中的主題寫入cookie中，設置cookie過期時(shí)間(jiān)，最後将當前選中的主題按鈕（li）設置為(wèi)當前選中狀态。具體(tǐ)看下面的代碼：

$("#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名稱為(wèi)”mystyle“，值為(wèi)當前選中的主題值，過去時(shí)間(jiān)為(wèi)30天，即：expires:30

接着需要做(zuò)的是頁面載入時(shí)，讀取主題cookie值，如果主題cookie存在則調用cookie值對應的主題樣式CSS文件，并且設置當前主題按鈕狀态為(wèi)選中狀态，反之，則調用默認樣式。代碼如下：

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");
}

将以上(shàng)兩段代碼加入到$(function(){})中，工作(zuò)到此完成，去看看效果吧(ba)。

值得(de)一提的是，本文應用的cookie記錄用戶所選擇設置的主題皮膚樣式，但(dàn)是當cookie到期或者用戶清除了浏覽器(qì)的COOKIE，亦或者用戶換用其他浏覽器(qì)浏覽時(shí)，當前設置的主題就會(huì)失效。為(wèi)了讓用戶永久保存選擇的主題樣式，必須将所選的主題與用戶信息對應，并寫入數(shù)據庫，下次該用戶登錄就可(kě)以直接讀取主題，當然，該方法應用在有(yǒu)用戶權限範圍的系統，如後台管理(lǐ)系統，個(gè)人(rén)中心等。