So ändern Sie den Skin einer Webseite mit JQuery

So ändern Sie den Skin einer Webseite mit JQuery_jquery

WBOY

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

Original

1345 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie JQuery den Skin einer Webseite ändern kann. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Um das Benutzererlebnis besser zu verbessern, verfügen viele Webseiten über die Funktion zum Ändern des Skins. Wie wird dies implementiert? Tatsächlich ändert das Ändern des Skins lediglich den CSS-Stil an der entsprechenden Position! !

Hier ist eine Demonstration, wie Sie ganz einfach Ihre Haut verändern können

Beachten Sie beim Entwerfen von HTML-Code einige Tipps. Sie können die ID der Skin-Optionsschaltfläche auf den Namen der Skin-Stildatei festlegen, sodass der Vorgang zum Wechseln des Skins viel einfacher ist muss eine Verbindungstabelle mit einem Id-Stil haben, indem der Wert des href-Attributs des Links manipuliert wird, wodurch eine Skin-Änderung erreicht wird. Das heißt: Der Benutzer kann den Skin nach dem Klicken ändern. Wenn der Benutzer jedoch den Browser aktualisiert oder schließt, wird der Skin erneut initialisiert. Verwenden Sie daher CooKie, um die aktuelle Auswahl zu speichern:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.