jQuery无刷新切换话题皮肤示例

主题皮肤切换功能在许多网站和系统中得到应用。用户可以根据此功能设置自己喜欢的主题颜色样式，增强用户体验，本文将重点介绍如何使用jQuery实现点击免费切换主题皮肤功能。

该函数的原理是通过点击主题样式定义，改变当前参考页面主题CSS文件，并将当前主题样式写入cookie或写入数据库，以便下一次用户访问页面时，最后一次调用是要设置一个好的主题样式。

准备主题皮肤风格

首先，我准备了三个样式表CSS文件，这是三种风格的主题皮肤，所引入的页面放在书页之间。

注意，我将title属性添加到每一个，它是有用的。另外，我已经禁止了第二个和第三个CSS文件，也就是说，第一个CSS文件是默认的。

XHTML

经典的
浅蓝色
棕色的

三个主题样式用于单击开关，并注意到我分别将id属性添加到每个LI中。

CSS

UL #款式{保证金：10px }
UL #风格里{浮动：左；宽度：50px；身高：40px；线高度：40px；填充：2px；
margin-left: 10px；border: 1px solid # FFF；文本对齐：中心；颜色：# FFF；鼠标指针}
UL #风格里。我{ border: 1px solid # 369；背景图像：URL（图像/选择.gif）；
背景重复：不重复；背景位置：4px 32px }
UL #风格里#默认{背景颜色：# 162934；}
UL #风格里#蓝色背景颜色：# 90c5e7 } {
UL #风格里#棕色{背景颜色：# 601f00 }

使用CSS渲染XHTML，在UL #款式li.cur指的是当前的主题下选择的方式，我用一个小勾表示当前选定的主题。

jqeury

首先，我们要介绍jQuery库和jquery.cookie plug-in.the jquery.cookie插件提供了一个强大的cookie操作jQuery，你不需要写一个复杂的Javaｓｃｒｉｐｔ，就直接调用插件，这个插件的使用，请阅读本站文章：

接下来，当用户单击所选主题时，以下操作：获取所选主题（ID），参见对CSS文件的引用，如果标题属性值与当前选定的主题ID值一致，则应用主题CSS文件，而另一个则引用CSS文件，将禁用。当前写入cookie的主题，设置cookie过期时间，最后当前选定的主题按钮（LI）当前被选中：

$（#风格里）。Click（function（）{）
var风格=美元（这）。Attr（ID）；
$（链接{标题=+风格+}）。RemoveAttr（禁用）；
$（）链接{标题！=+方式+}）。Attr（残疾人
$.cookie (mystyle
$（这）。AddClass（我），兄弟姐妹（）。RemoveClass（我）；
}）；

注意，在这种情况下，我将将选中的样式保存到用户cookie中。Cookie的名字是我的，这也是目前选题的价值。过去的时间是30天，即：过期时间：30天。

然后，当页面加载时，我们需要读取主题cookie值。如果主题cookie存在，我们调用与cookie值相对应的主题样式CSS文件，并设置要选择的当前主题按钮状态，否则，我们称为默认样式：

无功cookie_style =美元。饼干（我）；
如果（cookie_style = = null）{
$（链接{标题= 'default}）。RemoveAttr（禁用）；
$（#风格里#违约），AddClass（我）；
其他{ }
$（链接{标题=++ cookie_style }）。RemoveAttr（禁用）；
$（#风格里{ id =++ cookie_style }）。AddClass（我）；
$（）链接{标题！=+ cookie_style + }）。Attr（残疾人
}

上面的代码添加到$（函数（））}，以完成该工作。

值得一提的是，本文采用的cookie记录的主题皮肤样式由用户选择，但当cookie到期或用户清除浏览器的cookie，或用户切换到其他浏览器浏览，当前主题会失败。为了风格让用户可以选择永久保存的主题，相应的主题和用户信息必须被选择，并写入数据库，一个用户登录可以直接阅读的主题，当然，该方法应用于一个系统的用户权限，如后台管理系统、个人中心等。

以上是本文的全部内容，内容很详细，便于读者理解和阅读。我希望你能有所收获。