js實現(xiàn)簡單的網(wǎng)頁換膚效果
中心思想：網(wǎng)頁換膚的原理就是通過調(diào)用不同的樣式表文件來實現(xiàn)不同的皮膚切換，并且需要將換好的皮膚計入Cookie中，這樣用戶已下次訪問時，就可以顯示用戶自定義皮膚了
步驟：
1.在設(shè)計HTML代碼時，用了一些小技巧，就是將皮膚選擇按鈕<li>元素的id與網(wǎng)頁皮膚的樣式文件名稱設(shè)置的相同。這樣就可以使完成換膚操作簡化很多。
2.HTML結(jié)構(gòu)要有一個帶id的樣式表鏈接，通過操作該鏈接的herf屬性的值，從而實現(xiàn)換膚
<link rel="stylesheet" href="css/skin_0.css" id="cssfile"/>
3. 根據(jù)當(dāng)前的li的id，通過attr（）方法為<link>元素的href屬性設(shè)置不同的值代碼如下：
var $li = $("#skin li");
$li.click(function () {
$("#"+this.id).addClass("selected")
.siblings().removeClass("selected");
$("#cssfile").attr("href","css/"+this.id+".css");
});
4. 當(dāng)單機皮膚選擇按鍵時候就可以切開皮膚了。但是當(dāng)用戶刷新網(wǎng)頁或者關(guān)閉瀏覽起后，皮膚會被初始化，因此需要將當(dāng)前選擇的皮膚進行保存（jQuery中有一款Cookie插件），它簡化了Cookie的操作。
//將皮膚保存進cookie
$.cookie("myCssSkin",this.id,{path:'/',expires:10});
保存后，就可以通過Cookie來獲取當(dāng)前的皮膚了，如果Cookie確實存在，則將當(dāng)前設(shè)置為Cookie記錄的值：
//獲取Cookie中的皮膚
var cookie_skin = $.cookie("myCssSkin");
//判斷皮膚存不存在
if (cookie_skin){
switchSkin(cookie_skin);
}
//設(shè)置cookid中的皮膚
function switchSkin(skinName) {
$("#"+skinName).addClass("selected")
.siblings().removeClass("selected");
$("#cssfile").attr("href","css/"+skinName+".css");
$.cookie("myCssSkin",skinName,{path:'/',expires:10});
}
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)刷新父頁面不彈出提示框的方法,實例分析了javascript子窗口的打開以及子窗口與父窗口的交互操作技巧,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了純JS實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
js前端傳json后臺接收‘‘被轉(zhuǎn)為quot的問題解決
這篇文章主要介紹了js前端傳json后臺接收‘‘被轉(zhuǎn)為"的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JavaScript setInterval()與setTimeout()計時器
這篇文章主要介紹了JavaScript setInterval()與setTimeout()計時器，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了原生JavaScript實現(xiàn)滾動條效果的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
本文通過實例代碼給大家介紹了使用微信小程序開發(fā)彈出框功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
客戶端 使用XML DOM加載json數(shù)據(jù)的方法
我們?nèi)〕鰯?shù)據(jù)后可以以json的形式傳到前端處理，也可以以Xml Dom的形式傳到前端進行處理。下邊例子是利用Jquery處理XML Dom的例子。2010-09-09
JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息簡單示例
前端時間剛好使用了百度地圖的js api定位獲取用戶當(dāng)前經(jīng)緯度并獲取當(dāng)前詳細位置的功能,為了方便下次找起來方便一些自己在這里記錄一下,這篇文章主要給大家介紹了關(guān)于JS獲取經(jīng)緯度并根據(jù)經(jīng)緯度得到城市信息的相關(guān)資料,需要的朋友可以參考下2023-11-11
最近發(fā)現(xiàn)JS當(dāng)中toFixed()方法存在一些問題，采用原生的Number對象的原型對象上的toFixed()方法時，規(guī)則并不是所謂的“四舍五入”或者是四舍六入五成雙2012-11-11
這篇文章主要介紹了JS實現(xiàn)的3D拖拽翻頁效果,通過鼠標(biāo)事件結(jié)合時間函數(shù)動態(tài)操作頁面元素實現(xiàn)拖拽翻頁的效果,需要的朋友可以參考下2015-10-10