Home > Developer > JavaScript
The following code is used:
First, the HTML page code is as follows:
Copy codeThe Code is as follows:
<! 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> Jacob Song's shopping website </title>
<Link rel = "Stylesheet" href = "css/header.css" type = "text/css"/>
<Link rel = "Stylesheet" href = "css/skin/skin_0.css" type = "text/css" id = "cssfile"/>
</Head>
<Body>
<Script language = "javascript" src = "Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<! -- A Cookie plug-in is referenced. You can download the Cookie plug-in, or use the source code plug-in. The following shows the download -->
<Script language = "javascript" src = "Scripts/jquery. cookie. js" type = "text/javascript"> </script>
<! -- This is the core code ChangeSkin. js in the Scripts folder -->
<Script language = "javascript" src = "Scripts/ChangeSkin. js" type = "text/javascript"> </script>
<Div id = "header">
<A id = "logo" href = "#"> my shopping website </a>
<Ul id = "skin">
<Li id = "skin_0" title = "blue" class = "selected"> blue </li>
<Li id = "skin_1" title = "Purple"> purple </li>
<Li id = "skin_2" title = "red"> Red </li>
<Li id = "skin_3" title = "Sky Blue"> sky blue </li>
<Li id = "skin_4" title = "orange"> orange </li>
<Li id = "skin_5" title = "light green"> light green </li>
</Ul>
</Div>
</Body>
</Html>
CSS file, corresponding to HTML
Copy codeThe Code is as follows:
/* Start the Header style */
# Header {
Width: 800px;
Height: 80px;
Border: 1px solid # AAAAAA;
Margin: 10px auto;
Background: #3B5998;
}
/* Start with the logo style */
# Logo {
Float: left;
Margin: 0 0 0 10px;
Color: # FFF;
Font-size: 3em;
Font-weight: 700;
Line-height: 80px;
}
/* Switch the 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;}/* set the image position */
# 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 need some alternative CSS, which is needed for skin replacement. When you click, they use different CSS, and then they are selected and saved in the Cookie, in the Skin folder of the CSS folder, there are alternative Skin-changing CSS styles.
The Skin_0.css file is as follows:
Copy codeThe Code is as follows:
# Header {
Background: #3B5998;
}
The Skin_1.css file is as follows:
Copy codeThe Code is as follows:
# Header {
Background: # BB3BD9;
}
The Skin_2.css file is as follows:
Copy codeThe Code is as follows:
# Header {
Background: # E31559;
}
The Skin_3.css file is as follows:
Copy codeThe Code is as follows:
# Header {
Background: #08 BECE;
}
The Skin_4.css file is as follows:
Copy codeThe Code is as follows:
# Header {
Background: # FBA60A;
}
The Skin_5.css file is as follows:
Copy codeThe Code is as follows:
# Header {
Background: # AFD400;
}
In fact, we can see that the color is different. You can add more styles as needed in the future. Here is just an example for your reference,
After you finish the above work, you can run it. This article is just a simple demo, you can download the source code:
Click to download source code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
