本文实例讲述了jQuery+Cookie实现切换皮肤功能。分享给大家供大家参考，具体如下：
最近在学习Jquery，发现Jquery真的是非常强大，短短几行代码就能实现切换皮肤的功能。
1）关键代码
<!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>www.freexyz.cn jQuery Cookie切换皮肤</title>
<link id=\"cssfile\" href=\"Styles/Skins/skin_0.css\" rel=\"external nofollow\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"Styles/Site.css\" rel=\"external nofollow\" rel=\"stylesheet\" type=\"text/css\" />
<script src=\"Scripts/jquery-1.4.1.min.js\" type=\"text/javascript\"></script>
<script src=\"Scripts/jquery.cookie.js\" type=\"text/javascript\"></script>
<script language=\"javascript\" type=\"text/javascript\">
$(function () {
$(\'#skin>li\').click(function () {
var skinID = this.id;
switchSkin(skinID);
});
var skinID = $.cookie(\"skinID\"); //获取cookie
if (skinID) {//如果cookie存在，切换皮肤
switchSkin(skinID);
}
});
function switchSkin(skinID) {
$(\'#\' + skinID).addClass(\'selected\')
.siblings().removeClass(\'selected\');
var cssHref = \'Styles/Skins/\' + skinID + \'.css\';
$(\'#cssfile\').attr(\'href\', cssHref);
$.cookie(\"skinID\", skinID, { path: \"/\", expires: 10 }); //将皮肤样式的id保存到cookie中
}
</script>
</head>
<body>
<form id=\"form1\" runat=\"server\">
<div id=\"header\">
hello world!
<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>
</form>
</body>
</html>
运行效果：
2）完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery的cookie操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
© 版权声明
THE END
暂无评论内容