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

前端技术 2023/09/04 JavaScript
以下是源代码：
复制代码 代码如下:

<!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>

本文地址：https://www.stayed.cn/item/9096

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案