JQuery toggles web skins and saves the Cookie sample code
- 2020-03-30 03:20:29
- OfStack
Here is the source code:
<!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 Achieve 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" />
<!-- The introduction of jQuery -->
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<!-- The introduction of jQuery the cookie The 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") //The current <Li> Elements are selected
.siblings().removeClass("selected"); //Remove other peers <Li> Selection of elements
$("#cssfile").attr("href", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ".css"); //Set up different skins
$.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 });
}
//]]>
</script>
</head>
<body>
<div><h2>jQuery Skin no refresh switch and save </h2>
<div> Please click on the various demo boxes below to set the skin of the following content , When the page is closed, open again, the following content is set to the color. Because save to cookie So after some time to open the page, still for the last set of eyes.
<br /><a href="http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style="color:blue;text-decoration:none;"> Open a new online experience window </a></div></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></h1>
</div>
</div>
<div id="div_side_1">
<div id="game">
<h1 class="title"><a href="http://keleyi.com/a/bjad/ifjrn3s1.htm"> The original </a></h1>
</div>
</div>
</body>
</html>