suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zum Wechseln der jQuery+Cookie-Skin

Detaillierte Erläuterung der Schritte zum Wechseln der jQuery+Cookie-Skin

php中世界最好的语言
php中世界最好的语言Original
2018-05-08 16:01:301686Durchsuche

Dieses Mal werde ich Ihnen die Schritte zum Wechseln von Skins mit jQuery+Cookie ausführlich erklären. Was sind die Vorsichtsmaßnahmen für den Wechsel von Skins mit jQuery+Cookie? .

Ich habe kürzlich Jquery gelernt und festgestellt, dass Jquery wirklich leistungsfähig ist. Sie können Skins in nur wenigen Codezeilen wechseln.

1) Schlüsselcode

<!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>jQuery Cookie切换皮肤</title>
 <link id="cssfile" href="Styles/Skins/skin_0.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <link href="Styles/Site.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">
  $(function () {
   $('#skin>li').click(function () {
    var skinID = this.id;
    switchSkin(skinID);
   });
   var skinID = $.cookie("skinID"); //获取cookie
   if (skinID) {//如果cookie存在，切换皮肤
    switchSkin(skinID);
   }
  });
  function switchSkin(skinID) {
   $('#' + skinID).addClass('selected')
       .siblings().removeClass('selected');
   var cssHref = 'Styles/Skins/' + skinID + '.css';
   $('#cssfile').attr('href', cssHref);
   $.cookie("skinID", skinID, { path: "/", expires: 10 }); //将皮肤样式的id保存到cookie中
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <p id="header">
  hello world!
  <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>
 </p>
 </form>
</body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie den V-Show-Beurteilungsausdruck in Vue

iview benutzerdefinierte Schlüsselworteingabe für die Überprüfung Ausführliche Erklärung der Frame-Nutzung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Wechseln der jQuery+Cookie-Skin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Ausführliche Erläuterung der Schritte zum Implementieren des durch die Eingabe einer jQuery-Taste ausgelösten EreignissesNächster Artikel：Ausführliche Erläuterung der Schritte zum Implementieren des durch die Eingabe einer jQuery-Taste ausgelösten Ereignisses

In Verbindung stehende Artikel

Mehr sehen