jQuery切换网页皮肤并保存到Cookie示例代码

最新推荐文章于 2022-08-24 12:15:58 发布

Hellowongwong

最新推荐文章于 2022-08-24 12:15:58 发布

阅读量94

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/rik28/p/5604087.html

版权

经过使用，靠谱！

<!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实现页面皮肤切换并保存</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" /> <!-- 引入jQuery --> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script> <!-- 引入jQuery的cookie插件 --> <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") //当前<li>元素选中 .siblings().removeClass("selected"); //去掉其它同辈<li>元素的选中 $("#cssfile").attr("href", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ".css"); //设置不同皮肤 $.cookie( "MyCssSkin" , skinName , { path: '/', expires: 10 }); } //]]> </script> </head> <body> <div><h2>jQuery皮肤无刷新切换并保存</h2> <div>请点击下面的各种演示的小方框设定以下内容的皮肤,当关闭页面后再开，以下内容还是设定的颜色。因为保存到cookie，所以一段时间后打开页面，仍然为最后设置的眼色。 <br /><a href="http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style="color:blue;text-decoration:none;">新开在线体验窗口</a></div></div> <ul id="skin"> <li id="skin_0" title="灰色" class="selected">灰色</li> <li id="skin_1" title="紫色">紫色</li> <li id="skin_2" title="红色">红色</li> <li id="skin_3" title="天蓝色">天蓝色</li> <li id="skin_4" title="橙色">橙色</li> <li id="skin_5" title="淡绿色">淡绿色</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">原文</a></h1> </div> </div> </body> </html>