How to change the topic skin of jQuery without refreshing _ jquery

The main content of this article is jQuery's example of skin with no refreshing switching themes. In this article, cookie is used to record the skin style of the selected topic, you can refer to the theme skin switching function to apply it to many websites and systems. You can set your favorite theme color style based on this function, enhancing the user experience. This article will focus on how to use jQuery to implement the click-free new switch topic skin function.

This function is implemented by clicking the defined theme style to change the currently referenced theme CSS file on the page, and writing the current theme style to the cookie or to the database, so that the next time the user re-visits the page, the topic style set last time is called.
Prepare theme skin styles
First, I have prepared three style table CSS files, which are Subject skins of Three Styles. They are introduced to the page and placed in.

Note that It is useful to add the title attribute. In addition, I disabled 2nd and 3rd CSS files. By default, 1st CSS files are used.
XHTML

 
 
  
  
  
Classic
  
  
  
Light blue
  
  
  
Brown
 
 
 
 

Three theme styles for click SwitchingNote that I have added the id attribute to each li.
CSS

ul#styles{margin-top:10px} ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px; margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer} ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif); background-repeat:no-repeat; background-position:4px 32px} ul#styles li#default{background-color:#162934;} ul#styles li#blue{background-color:#90c5e7} ul#styles li#brown{background-color:#601f00} 

Use CSS to render XHTML. ul # styles li. cur indicates the selected style of the current topic. I use a small tick to represent the selected topic.
JQeury
First, we need to introduce the jquery library and jquery. cookie plug-in. The jquery. cookie plug-in provides powerful cookie operations for jQuery. You don't need to write complicated native javascript, just call the plug-in directly. For the use of this plug-in, please read this article: