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