suchen

Heim >Web-Frontend >js-Tutorial >So ändern Sie den Skin einer Webseite mit JQuery_jquery

So ändern Sie den Skin einer Webseite mit JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:57:141354Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Jquery-Methode zum dynamischen Hinzufügen der Eingabe box_jqueryNächster Artikel：Jquery-Methode zum dynamischen Hinzufügen der Eingabe box_jquery

In Verbindung stehende Artikel

Mehr sehen