JQuery給網(wǎng)頁更換皮膚的方法
本文實(shí)例講述了JQuery給網(wǎng)頁更換皮膚的方法。分享給大家供大家參考。具體分析如下:
為了更好的提升用戶體驗(yàn),很多網(wǎng)頁都有換膚的功能,那么這是怎么實(shí)現(xiàn)的那,其實(shí),換膚只不過是在對(duì)應(yīng)的位置改了Css樣式罷了?。?/p>
下面就演示如何簡單的換膚
在設(shè)計(jì)HTmL代碼時(shí),注意一些小技巧,可以將皮膚選項(xiàng)按鈕的id設(shè)置成和皮膚樣式文件名稱相同,這樣皮膚切換的操作就簡單多了樣式連接要帶一個(gè)有Id樣式的連接表,通過操作該鏈接的href屬性的值,從而實(shí)現(xiàn)換膚。即: 用戶點(diǎn)擊完就可以換膚了,但是,當(dāng)用戶刷新或者關(guān)閉瀏覽器時(shí),皮膚又會(huì)被初始化,所以考慮用CooKie保存當(dāng)前選擇:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <link href="css/default.css" rel="stylesheet" type="text/css" /> <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" /> <!-- 引入jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <!-- 引入jQuery的cookie插件 --> <script src="js/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li =$("#skin li"); $li.click(function(){ switchSkin( this.id ); }); var cookie_skin = $.cookie( "MyCssSkin"); if (cookie_skin) { switchSkin( cookie_skin ); } }); function switchSkin(skinName){ $("#"+skinName).addClass("selected").siblings().removeClass("selected"); //當(dāng)前<li>元素選中 //去掉其它同輩<li>元素的選中 $("#cssfile").attr("href","css/"+ skinName +".css"); //設(shè)置不同皮膚 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); } //]]> </script> </head> <body> <ul id="skin"> <li id="skin_0" title="灰色" class="selected">灰色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="紅色">紅色</li> <li id="skin_3" title="天藍(lán)色">天藍(lán)色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡綠色">淡綠色</li> </ul> <div id="div_side_0"> <div id="news"> <h1 class="title">時(shí)事新聞</h1> </div> </div> <div id="div_side_1"> <div id="game"> <h1 class="title">娛樂新聞</h1> </div> </div> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery切換網(wǎng)頁皮膚并保存到Cookie示例代碼
- JQuery UI皮膚定制
- jQuery無刷新切換主題皮膚實(shí)例講解
- jQuery版Tab標(biāo)簽切換
- jQuery簡單tab切換效果實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)選項(xiàng)卡切換效果簡單演示
- 基于Jquery的簡單圖片切換效果
- jQuery實(shí)現(xiàn)切換頁面過渡動(dòng)畫效果
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- 一個(gè)基于jquery的圖片切換效果
- jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】
相關(guān)文章
jquery easyui dataGrid動(dòng)態(tài)改變排序字段名的方法
jQuery easyui dataGrid 動(dòng)態(tài)改變排序字段名,一般情況下,在使用的時(shí)候,我們會(huì)點(diǎn)擊相應(yīng)字段進(jìn)行排序。今天小編以java為例給大家講解問題原因及解決方案,需要的的朋友參考下2017-03-03jquery append()方法與html()方法的區(qū)別及使用介紹
append()方法在被選元素的結(jié)尾插入指定內(nèi)容,html()方法返回或設(shè)置被選元素的內(nèi)容,下面為大家介紹下兩者的區(qū)別及使用2014-08-08bootstrap中日歷范圍選擇插件daterangepicker的使用詳解
daterangepicker是bootstrap的一個(gè)日歷插件 主要用來選擇時(shí)間段的插件 這個(gè)插件很好用也很容易操作 。這篇文章主要介紹了bootstrap中日歷范圍選擇插件daterangepicker的使用詳解,需要的朋友可以參考下2018-04-04『jQuery』取指定url格式及分割函數(shù)應(yīng)用
使用jQuery取指定url格式,并使用alert彈出,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能
本文通過實(shí)例代碼給大家分享了jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能,需要的朋友參考下吧2018-01-01jQuery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項(xiàng)目的時(shí)候經(jīng)常會(huì)在主頁面上點(diǎn)擊某個(gè)按鈕,右側(cè)彈出一個(gè)div輸出對(duì)應(yīng)內(nèi)容的詳細(xì)信息,怎么實(shí)現(xiàn)的呢,今天小編給大家分享通過jquery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果,感興趣的朋友一起看看吧2016-10-10