jQuery web page skinning implementation code_jquery

The following is the code:
First the HTML page code is as follows:

Copy the code The code is as follows:

< ;link rel="Stylesheet" href="css/header.css" type="text/css" />

My shopping website

• Blue


• Purple


• Red


• Sky Blue


• orange


• Light Green

CSS file, corresponding HTML

Copy code The code is as follows:

/*Header style starts*/
#header{
width:800px;
height:80px;
border: 1px solid #AAAAAA;
margin:10px auto;
background:#3B5998;
}
/*logo style start*/
#logo {
float:left;
margin:0 0 0 10px;
color:#FFF;
font-size:3em;
font-weight:700;
line-height:80px;
}
/*Switch skin style*/
#skin {
float:right;
margin:10px;
padding:4px;
width:120px;
list-style:none;
border: 1px solid #CCCCCC;
background:#FFF;
}
#skin li {
float:left;
margin-right:4px;
width:15px;
height:15px;
text-indent:-9999px;
overflow:hidden;
display:block;
cursor:pointer;
background-image:url(../Imgs/theme.gif);
}
#skin_0 { background-position:0px 0px; } / *This is the position where the image is set*/
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1 .selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

Then you also need some spare CSS, which is needed for skin change , when you click, they use different CSS, and then select it and save it in Cookie. There is an alternative skinning CSS style in the Skin folder under the CSS folder
The Skin_0.css file is as follows:

Copy code The code is as follows:

#header{
background:#3B5998;
}

Skin_1.css file is as follows:

Copy the code The code is as follows:

#header{
background:#BB3BD9;
}

Skin_2.css file is as follows:

Copy the code The code is as follows:

#header{
background:#E31559;
}

Skin_3.css file is as follows:

Copy code The code is as follows:

#header{
background:#08BECE;
}

Skin_4.css file is as follows:

Copy code The code is as follows:

#header{
background:#FBA60A;
}

Skin_5.css file is as follows:

Copy code The code is as follows:

#header{
background:#AFD400;
}

In fact, you can see that the colors are different. You can add more styles in the future as needed. Here is just an example for your reference.
After you complete the above work, you can run Okay, this article is just a simple demonstration of skin change. You can download the source code:
Click to download the source code