cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menukar kulit halaman web dengan JQuery_jquery

Bagaimana untuk menukar kulit halaman web dengan JQuery_jquery

WBOY
WBOYasal
2016-05-16 15:57:141360semak imbas

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>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah Jquery untuk menambah input box_jquery secara dinamikArtikel seterusnya：Kaedah Jquery untuk menambah input box_jquery secara dinamik

Artikel berkaitan

Lihat lagi