jQuery无刷新切换主题皮肤实例讲解(刷新页面jquery)

编辑：rootadmin

推荐整理分享jQuery无刷新切换主题皮肤实例讲解(刷新页面jquery)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jq刷新div,jquery实现页面刷新,jq刷新div,jquery 刷新div,jquery刷新局部页面,jquery刷新页面重新获取数据,jquery 刷新div,html无刷新跳转,内容如对您有帮助，希望把文章链接给更多的朋友！

主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。

实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主题样式写入cookie中或者写入数据库中，以便下次该用户重新访问页面时，调用的就是上次设置好的主题样式。准备主题皮肤样式首先，我准备了三个样式表CSS文件，分别是三种风格的主题皮肤，将其引入页面，放置在页面的<head>之间。

注意我给每个<link>添加了title属性，是由用处的，另外我禁用了第2个和第3个CSS文件，就是默认起作用的是第1个CSS文件。XHTML

三种主题风格用于点击切换，注意我分别给每个li加了id属性。CSS

用CSS渲染XHTML，其中ul#styles li.cur是指当前主题选中下的样式，我用一个小勾表示当前选中的主题。jQeury首先我们要引入jquery库和jquery.cookie插件。jquery.cookie插件为jQuery提供了强大的cookie操作功能，你不用去写复杂的原生的javascript，只管直接调用该插件就行。关于该插件的使用，请阅读本站文章：

接下来，当用户点击切换选择主题时，要发生以下动作：获取选择的主题（id），查看引用的CSS文件，如果发现其title属性值正好与当前选中的主题id值相等，则应用该主题CSS文件，同时将其他引用的CSS文件禁用，并且将当前选中的主题写入cookie中，设置cookie过期时间，最后将当前选中的主题按钮（li）设置为当前选中状态。具体看下面的代码：

注意，在本例中我将选中的样式保存在用户cookie中，cookie名称为”mystyle“，值为当前选中的主题值，过去时间为天，即：expires:接着需要做的是页面载入时，读取主题cookie值，如果主题cookie存在则调用cookie值对应的主题样式CSS文件，并且设置当前主题按钮状态为选中状态，反之，则调用默认样式。代码如下：

将以上两段代码加入到$(function(){})中，工作到此完成。值得一提的是，本文应用的cookie记录用户所选择设置的主题皮肤样式，但是当cookie到期或者用户清除了浏览器的COOKIE，亦或者用户换用其他浏览器浏览时，当前设置的主题就会失效。为了让用户永久保存选择的主题样式，必须将所选的主题与用户信息对应，并写入数据库，下次该用户登录就可以直接读取主题，当然，该方法应用在有用户权限范围的系统，如后台管理系统，个人中心等。