本文實(shí)例講述了JQuery給網(wǎng)頁(yè)更換皮膚的方法。分享給大家供大家參考。具體分析如下：
為了更好的提升用戶體驗(yàn)，很多網(wǎng)頁(yè)都有換膚的功能，那么這是怎么實(shí)現(xiàn)的那，其實(shí)，換膚只不過是在對(duì)應(yīng)的位置改了Css樣式罷了！！
下面就演示如何簡(jiǎn)單的換膚
在設(shè)計(jì)HTmL代碼時(shí)，注意一些小技巧，可以將皮膚選項(xiàng)按鈕的id設(shè)置成和皮膚樣式文件名稱相同，這樣皮膚切換的操作就簡(jiǎn)單多了樣式連接要帶一個(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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
