溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關jQuery中怎么實現無刷新切換主題皮膚功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
首先，我準備了三個樣式表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文件。
<ul id="styles">
<li id="default">經典</li>
<li id="blue">淡藍</li>
<li id="brown">棕色</li>
</ul>
三種主題風格用于點擊切換，注意我分別給每個li加了id屬性。
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是指當前主題選中下的樣式，我用一個小勾表示當前選中的主題。
首先我們要引入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，亦或者用戶換用其他瀏覽器瀏覽時，當前設置的主題就會失效。為了讓用戶永久保存選擇的主題樣式，必須將所選的主題與用戶信息對應，并寫入數據庫，下次該用戶登錄就可以直接讀取主題，當然，該方法應用在有用戶權限范圍的系統，如后臺管理系統，個人中心等。
上述就是小編為大家分享的jQuery中怎么實現無刷新切換主題皮膚功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
