Heim  >  Artikel  >  Web-Frontend  >  jQuery+Cookie implementiert den Skin-Switching-Effekt (mit Code)

jQuery+Cookie implementiert den Skin-Switching-Effekt (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-05-03 14:05:531371Durchsuche

Dieses Mal bringe ich Ihnen jQuery+Cookie, um den Effekt des Skinwechsels zu erzielen (mit Code). Was sind die Vorsichtsmaßnahmen für jQuery+Cookie, um Skins zu wechseln? Schauen Sie mal rein.

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:

Wie gehe ich vor, wenn V-Show nicht wirksam wird?

Was sind die Debug-Methoden in der Konsole?

Das obige ist der detaillierte Inhalt vonjQuery+Cookie implementiert den Skin-Switching-Effekt (mit Code). 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