Home > Developer > JavaScript
The source 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> jquery implements page skin switch and save </title> <base target = "_ blank"/>
<Link href = "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/default.css" rel = "stylesheet" type = "text/css"/>
<Link href = "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/skin_0.css" rel = "stylesheet" type = "text/css" id = "cssfile"/>
<! -- Introduce jQuery -->
<Script type = "text/javascript" src = "http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"> </script>
<! -- Introduce jQuery's cookie plug-in -->
<Script src = "http://keleyi.com/keleyi/phtml/jqtexiao/25/js/jquery.cookie.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
// <! [CDATA [
$ (Function (){
Var $ li = $ ("# skin li ");
$ Li. click (function (){
SwitchSkin (this. id );
});
Var cookie_skin = $. cookie ("MyCssSkin ");
If (cookie_skin ){
SwitchSkin (cookie_skin );
}
});
Function switchSkin (skinName ){
$ ("#" + SkinName). addClass ("selected") // select the current <li> element
. Siblings (). removeClass ("selected"); // remove the selected <li> element from other peers
$ ("# Cssfile"). attr ("href", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ". css"); // set different skins
$. Cookie ("MyCssSkin", skinName, {path: '/', expires: 10 });
}
//]>
</Script>
</Head>
<Body>
<Div> <Div> click the small boxes in the following demos to set the skin of the following content. When the page is closed, the following content is still set. Because it is saved to the cookie, after a period of time, the page is opened and the last set eye color is still used.
<Br/> <a href = "http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style = "color: blue; text-decoration: none; "> new online experience window </a> </div>
<Ul id = "skin">
<Li id = "skin_0" title = "gray" class = "selected"> gray </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 id = "div_side_0">
<Div id = "news">
<H1 class = "title"> <a href = "http://keleyi.com/menu/jquery/"> jQuery </a> </Div>
</Div>
<Div id = "div_side_1">
<Div id = "game">
<H1 class = "title"> <a href = "http://keleyi.com/a/bjad/ifjrn3s1.htm"> original </a> </Div>
</Div>
</Body>
</Html>
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
