Detaillierte Erläuterung der Schritte zum Wechseln der jQuery+Cookie-Skin-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-05-08 16:01:30

Original

1637 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!