Detailed explanation of jQuery+Cookie switching skin steps

This time I will bring you a detailed explanation of the steps for switching skins with jQuery Cookie. What are the precautions for switching skins with jQuery Cookie? Here are practical cases, let’s take a look.

I’ve been learning Jquery recently and found that Jquery is really powerful. You can switch skins in just a few lines of code.

1) Key Code

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


 <title>jQuery Cookie切换皮肤</title>
 <link>
 <link>
 <script></script>
 <script></script>
 <script>
  $(function () {
   $(&#39;#skin>li&#39;).click(function () {
    var skinID = this.id;
    switchSkin(skinID);
   });
   var skinID = $.cookie("skinID"); //获取cookie
   if (skinID) {//如果cookie存在，切换皮肤
    switchSkin(skinID);
   }
  });
  function switchSkin(skinID) {
   $(&#39;#&#39; + skinID).addClass(&#39;selected&#39;)
       .siblings().removeClass(&#39;selected&#39;);
   var cssHref = &#39;Styles/Skins/&#39; + skinID + &#39;.css&#39;;
   $(&#39;#cssfile&#39;).attr(&#39;href&#39;, cssHref);
   $.cookie("skinID", skinID, { path: "/", expires: 10 }); //将皮肤样式的id保存到cookie中
  }
 </script>


 

 

  hello world!   

   
• 蓝色
   
• 紫色
   
• 红色
   
• 天蓝色
   
• 橙色
   
• 淡绿色
  

   

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to implement v-show judgment expression in Vue

iview custom verification keyword input Detailed explanation of box usage

The above is the detailed content of Detailed explanation of jQuery+Cookie switching skin steps. For more information, please follow other related articles on the PHP Chinese website!