jQuery non-refresh switching theme skin example explanation_jquery

The theme skin switching function is used in many websites and systems. Users can set their favorite theme color style according to this function, which enhances the user experience. This article will focus on how to use jQuery to implement the function of switching theme skins with one click without refreshing.

The principle of implementing this function is to change the theme CSS file currently referenced by the page by clicking on the defined theme style, and write the current theme style into a cookie or into the database so that the next time the user revisits the page , what is called is the theme style set last time.
Prepare theme skin style
First, I prepared three style sheet CSS files, which are three styles of theme skins, introduced them into the page, and placed them between the of the page.

<link title="default" rel="stylesheet" type="text/css" href="css/default.css" /> 
<link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" /> 
<link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" /> 

Note that I added the title attribute to each for purpose. In addition, I disabled the second and third CSS files, which means that the first CSS file takes effect by default.
XHTML

<ul id="styles"> 
 <li id="default">经典</li> 
 <li id="blue">淡蓝</li> 
 <li id="brown">棕色</li> 
</ul> 

Three theme styles are used for click switching. Note that I added the id attribute to each li separately.
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, where ul#styles li.cur refers to the style under the currently selected theme. I use a small check mark to indicate the currently selected theme.
jQeury
First we need to introduce the jquery library and jquery.cookie plug-in. The jquery.cookie plug-in provides powerful cookie operation functions for jQuery. You don't need to write complicated native javascript, just call the plug-in directly. Regarding the use of this plug-in, please read the article on this site:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 

Next, when the user clicks to switch to select a theme, the following actions will occur: get the selected theme (id), check the referenced CSS file, and if it is found that its title attribute value is exactly equal to the currently selected theme id value, then Apply the theme CSS file, disable other referenced CSS files, write the currently selected theme into a cookie, set the cookie expiration time, and finally set the currently selected theme button (li) to the currently selected state. See the code below for details:

$("#styles li").click(function(){ 
 var style = $(this).attr("id"); 
 $("link[title='"+style+"']").removeAttr("disabled"); 
 $("link[title!='"+style+"']").attr("disabled","disabled"); 
 $.cookie("mystyle",style,{expires:30}); 
 $(this).addClass("cur").siblings().removeClass("cur"); 
}); 

Note that in this example I save the selected style in the user cookie. The cookie name is "mystyle", the value is the currently selected theme value, and the past time is 30 days, that is: expires:30
What needs to be done next is to read the theme cookie value when the page loads. If the theme cookie exists, call the theme style CSS file corresponding to the cookie value, and set the current theme button status to the selected state. Otherwise, call the default style. The code is as follows:

var cookie_style = $.cookie("mystyle"); 
if(cookie_style==null){ 
 $("link[title='default']").removeAttr("disabled"); 
 $("#styles li#default").addClass("cur"); 
}else{ 
 $("link[title='"+cookie_style+"']").removeAttr("disabled"); 
 $("#styles li[id='"+cookie_style+"']").addClass("cur"); 
 $("link[title!='"+cookie_style+"']").attr("disabled","disabled"); 
} 

Add the above two pieces of code to $(function(){}), and the work is completed.
It is worth mentioning that the cookie used in this article records the theme skin style chosen by the user, but when the cookie expires or the user clears the browser's COOKIE, or the user switches to another browser to browse , the currently set theme will become invalid. In order for the user to permanently save the selected theme style, the selected theme must correspond to the user information and be written to the database. The user can directly read the theme next time he logs in. Of course, this method should be used in systems with user permissions. , such as backend management system, personal center, etc.

The above is the entire content of this article. The content is very detailed and convenient for readers to understand and read. I hope everyone can gain something!