溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jQuery中怎么實(shí)現(xiàn)無(wú)刷新切換主題皮膚功能

發(fā)布時(shí)間：2021-08-09 17:18:59 來(lái)源：億速云 閱讀：131 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)jQuery中怎么實(shí)現(xiàn)無(wú)刷新切換主題皮膚功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

準(zhǔn)備主題皮膚樣式

首先，我準(zhǔn)備了三個(gè)樣式表CSS文件，分別是三種風(fēng)格的主題皮膚，將其引入頁(yè)面，放置在頁(yè)面的<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" />

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

XHTML

<ul id="styles">    <li id="default">經(jīng)典</li>    <li id="blue">淡藍(lán)</li>    <li id="brown">棕色</li> </ul>

三種主題風(fēng)格用于點(diǎ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是指當(dāng)前主題選中下的樣式，我用一個(gè)小勾表示當(dāng)前選中的主題。

jQeury

首先我們要引入jquery庫(kù)和jquery.cookie插件。jquery.cookie插件為jQuery提供了強(qiáng)大的cookie操作功能，你不用去寫復(fù)雜的原生的javascript，只管直接調(diào)用該插件就行。關(guān)于該插件的使用，請(qǐng)閱讀本站文章：使用jQuery操作Cookies

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script>

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

$("#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“，值為當(dāng)前選中的主題值，過(guò)去時(shí)間為30天，即：expires:30

接著需要做的是頁(yè)面載入時(shí)，讀取主題cookie值，如果主題cookie存在則調(diào)用cookie值對(duì)應(yīng)的主題樣式CSS文件，并且設(shè)置當(dāng)前主題按鈕狀態(tài)為選中狀態(tài)，反之，則調(diào)用默認(rèn)樣式。代碼如下：

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(){})中

值得一提的是，本文應(yīng)用的cookie記錄用戶所選擇設(shè)置的主題皮膚樣式，但是當(dāng)cookie到期或者用戶清除了瀏覽器的COOKIE，亦或者用戶換用其他瀏覽器瀏覽時(shí)，當(dāng)前設(shè)置的主題就會(huì)失效。為了讓用戶永久保存選擇的主題樣式，必須將所選的主題與用戶信息對(duì)應(yīng)，并寫入數(shù)據(jù)庫(kù)，下次該用戶登錄就可以直接讀取主題，當(dāng)然，該方法應(yīng)用在有用戶權(quán)限范圍的系統(tǒng)，如后臺(tái)管理系統(tǒng)，個(gè)人中心等。

上述就是小編為大家分享的jQuery中怎么實(shí)現(xiàn)無(wú)刷新切換主題皮膚功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手