快捷導(dǎo)航

JQuery給網(wǎng)頁(yè)更換皮膚的方法

更新時(shí)間：2015年05月30日 15:22:32 作者：hitxueliang

這篇文章主要介紹了JQuery給網(wǎng)頁(yè)更換皮膚的方法,用到了jQuery頁(yè)面元素獲取、樣式及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JQuery給網(wǎng)頁(yè)更換皮膚的方法。分享給大家供大家參考。具體分析如下：

為了更好的提升用戶體驗(yàn)，很多網(wǎng)頁(yè)都有換膚的功能，那么這是怎么實(shí)現(xiàn)的那，其實(shí)，換膚只不過(guò)是在對(duì)應(yīng)的位置改了Css樣式罷了?。?/p>

下面就演示如何簡(jiǎn)單的換膚

在設(shè)計(jì)HTmL代碼時(shí)，注意一些小技巧，可以將皮膚選項(xiàng)按鈕的id設(shè)置成和皮膚樣式文件名稱相同，這樣皮膚切換的操作就簡(jiǎn)單多了樣式連接要帶一個(gè)有Id樣式的連接表，通過(guò)操作該鏈接的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">娛樂(lè)新聞</h1>
 </div>
</div>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: