jQuery是一款非常流行的JavaScript框架,而Cookie是瀏覽器端存儲數(shù)據(jù)的一種方式。使用jQuery Cookie插件,可以方便地實現(xiàn)網(wǎng)頁換膚的功能。
//引入jQuery和jQuery Cookie插件 <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> $(function(){ //獲取當前皮膚 var skin = $.cookie("skin"); if(skin){ //如果已經(jīng)保存了皮膚,則設(shè)置當前頁面的皮膚為保存的皮膚 $("link[title='"+skin+"']").removeAttr("disabled"); }else{ //如果沒有保存過皮膚,則設(shè)置默認皮膚 $("link[title='default']").removeAttr("disabled"); } //點擊換膚按鈕時,保存皮膚到Cookie中 $(".skinBtn").click(function(){ var skin = $(this).attr("title");//獲取皮膚名稱 $.cookie("skin",skin,{expires:30});//保存皮膚到Cookie中,有效期為30天 $("link[rel='stylesheet']").attr("disabled", "disabled");//禁用掉所有樣式表 $("link[title='"+skin+"']").removeAttr("disabled");//啟用設(shè)置好的皮膚樣式表 }); });
上述代碼會先從Cookie中獲取存儲的皮膚名稱,如果存在,則將當前頁面的樣式表設(shè)置為對應(yīng)的皮膚樣式表。如果不存在,則默認使用“default”樣式表。當用戶點擊換膚按鈕時,將選中的皮膚名稱保存到Cookie中,并啟用對應(yīng)的樣式表。
以上就是使用jQuery Cookie插件實現(xiàn)網(wǎng)頁換膚的代碼示例。