主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。
实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主题样式写入cookie中或者写入数据库中，以便下次该用户重新访问页面时，调用的就是上次设置好的主题样式。
准备主题皮肤样式
首先，我准备了三个样式表CSS文件，分别是三种风格的主题皮肤，将其引入页面，放置在页面的<head>之间。
<link title="default" rel="stylesheet" type="text/css" href="css/default.css" />
<link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" />
<link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" />
注意我给每个<link>添加了title属性，是由用处的，另外我禁用了第2个和第3个CSS文件，就是默认起作用的是第1个CSS文件。
XHTML
<ul id="styles">
<li id="default">经典</li>
<li id="blue">淡蓝</li>
<li id="brown">棕色</li>
</ul>
三种主题风格用于点击切换，注意我分别给每个li加了id属性。
CSS
ul#styles{margin-top:10px}
ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px;
margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer}
ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif);
background-repeat:no-repeat; background-position:4px 32px}
ul#styles li#default{background-color:#162934;}
ul#styles li#blue{background-color:#90c5e7}
ul#styles li#brown{background-color:#601f00}
用CSS渲染XHTML，其中ul#styles li.cur是指当前主题选中下的样式，我用一个小勾表示当前选中的主题。
jQeury
首先我们要引入jquery库和jquery.cookie插件。jquery.cookie插件为jQuery提供了强大的cookie操作功能，你不用去写复杂的原生的javascript，只管直接调用该插件就行。关于该插件的使用，请阅读本站文章：使用jQuery操作Cookies
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
接下来，当用户点击切换选择主题时，要发生以下动作：获取选择的主题（id），查看引用的CSS文件，如果发现其title属性值正好与当前选中的主题id值相等，则应用该主题CSS文件，同时将其他引用的CSS文件禁用，并且将当前选中的主题写入cookie中，设置cookie过期时间，最后将当前选中的主题按钮（li）设置为当前选中状态。具体看下面的代码：
$("#styles li").click(function(){
var style = $(this).attr("id");
$("link[title='"+style+"']").removeAttr("disabled");
$("link[title!='"+style+"']").attr("disabled","disabled");
$.cookie("mystyle",style,{expires:30});
$(this).addClass("cur").siblings().removeClass("cur");
});
注意，在本例中我将选中的样式保存在用户cookie中，cookie名称为”mystyle“，值为当前选中的主题值，过去时间为30天，即：expires:30
接着需要做的是页面载入时，读取主题cookie值，如果主题cookie存在则调用cookie值对应的主题样式CSS文件，并且设置当前主题按钮状态为选中状态，反之，则调用默认样式。代码如下：
var cookie_style = $.cookie("mystyle");
if(cookie_style==null){
$("link[title='default']").removeAttr("disabled");
$("#styles li#default").addClass("cur");
}else{
$("link[title='"+cookie_style+"']").removeAttr("disabled");
$("#styles li[id='"+cookie_style+"']").addClass("cur");
$("link[title!='"+cookie_style+"']").attr("disabled","disabled");
}
将以上两段代码加入到$(function(){})中，工作到此完成，去看看效果吧。
值得一提的是，本文应用的cookie记录用户所选择设置的主题皮肤样式，但是当cookie到期或者用户清除了浏览器的COOKIE，亦或者用户换用其他浏览器浏览时，当前设置的主题就会失效。为了让用户永久保存选择的主题样式，必须将所选的主题与用户信息对应，并写入数据库，下次该用户登录就可以直接读取主题，当然，该方法应用在有用户权限范围的系统，如后台管理系统，个人中心等。
相关推荐
本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。 实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主题样式写入cookie中或者写入数据库中，以便下次该用户...
为了更好的提升用户体验，很多网页都有换肤的功能，那么这是怎么实现的那，其实，换肤只不过是在对应的位置改了Css样式罢了！！ 下面就演示如何简单的换肤 在设计HTmL代码时，注意一些小技巧，可以将皮肤选项按钮的...
Jquery无刷新评论功能，以及新闻，图片热点推荐显示功能。 技术点 Asp.net多层架构，多数据库开发模式，缓存，自定义标签的详细开发步骤，Repeater控件以及AspNetPager控件的配合使用，全站生成静态页并解析...
在asprain里，用户切换隐身/在线状态、更换自己的头像、版主删除水帖、加亮优秀帖等很多操作，都只要一键完成，不需要页面刷新或者跳转。asprain论坛还支持版主批量删帖、转移帖子、将帖子设为精华等等操作，并支持...
9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在对话框中可用)与全选 10、修复Chrome特定情况下出现的iframe错位问题 11、修正2.0.8版本后锁屏不兼容Safari的问题 12、修复Firefox调大对话框拖帧的现象 13、...
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...
Java EJB中有、无状态SessionBean的两个例子 两个例子，无状态SessionBean可会话Bean必须实现SessionBean，获取系统属性，初始化JNDI，取得Home对象的引用，创建EJB对象，计算利息等；在有状态SessionBean中，用...
1.[改进]去掉旧版AJAXRequest换成jQuery中的AJAX 2.[改进]为了系统安全和稳定去掉宇初验证码和印象码，加入4种数字验证码、1种中文验证码、1种计算题验证码供用户选择 3.[改进]为了后台系统安全，后台登录页不用判断...
在asprain里，用户切换隐身/在线状态、更换自己的头像、版主删除水帖、加亮优秀帖等很多操作，都只要一键完成，不需要页面刷新或者跳转。asprain论坛还支持版主批量删帖、转移帖子、将帖子设为精华等等操作，并支持...
在asprain里，用户切换隐身/在线状态、更换自己的头像、版主删除水帖、加亮优秀帖等很多操作，都只要一键完成，不需要页面刷新或者跳转。asprain论坛还支持版主批量删帖、转移帖子、将帖子设为精华等等操作，并支持...
-为PageContext增加静态函数Refresh，在切换语言和皮肤时使用。 +2009-12-01 v2.1.7 -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些...
-为PageContext增加静态函数Refresh，在切换语言和皮肤时使用。 +2009-12-01 v2.1.7 -增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些...