Bagaimana untuk menukar kulit halaman web dengan JQuery

Bagaimana untuk menukar kulit halaman web dengan JQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:57:14

asal

1332 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara JQuery boleh menukar kulit halaman web. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Untuk meningkatkan pengalaman pengguna dengan lebih baik, banyak halaman web mempunyai fungsi menukar kulit, jadi bagaimana ini dilaksanakan Sebenarnya, penukaran kulit hanyalah mengubah gaya CSS dalam kedudukan yang sepadan! !

Berikut ialah demonstrasi cara menukar kulit anda dengan mudah

Apabila mereka bentuk kod HTML, perhatikan beberapa petua Anda boleh menetapkan id butang pilihan kulit supaya sama dengan nama fail gaya kulit, supaya operasi penukaran kulit lebih mudah mesti mempunyai jadual sambungan dengan gaya Id , dengan memanipulasi nilai atribut href pautan, dengan itu mencapai perubahan kulit. Iaitu: pengguna boleh menukar kulit selepas mengklik Namun, apabila pengguna menyegarkan atau menutup penyemak imbas, kulit akan dimulakan semula, jadi pertimbangkan untuk menggunakan CooKie untuk menyimpan pilihan semasa:

<!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");
  //当前<li>元素选中
  //去掉其它同辈<li>元素的选中
  $("#cssfile").attr("href","css/"+ skinName +".css");
  //设置不同皮肤
  $.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="天蓝色">天蓝色</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">时事新闻</h1>
 </div>
  </div>
  <div id="div_side_1">
 <div id="game">
  <h1 class="title">娱乐新闻</h1>
 </div>
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.