不刷新和切换主题皮肤的jQuery示例说明

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

实现该功能的原理是通过点击定义的主题样式来改变页面当前引用的主题CSS文件，并将当前的主题样式写入cookie或数据库中，这样在用户重访页面时就会调用上次设置的主题样式。准备主题皮肤样式首先，我准备了三个样式表的CSS文件，它们是三种样式的主题皮肤，并将其引入到页面中，放置在页面头部之间。

链接标题='default' rel='样式表'类型=' text/CSS ' href=' CSS/default . CSS '/链接标题='blue' rel='样式表'类型=' text/CSS ' href=' CSS/blue . CSS ' disabled=' disabled '/链接标题=' brown' rel='样式表'类型=' text/CSS ' href=' CSS/brown . CSS ' disabled=' disabled '/请注意，我为每个链接添加了title属性，它由使用，我禁用了第二个可扩展的超文本标记语言

ul id=' style ' Li id=' default ' classic/Li Li id=' blue '浅蓝色/li li id='brown' brown /li /ul三种主题样式用于点击切换。请注意，我已经分别为每个li添加了id属性。半铸钢钢性铸铁(Cast Semi-Steel)

ul # style { margin-top :10 px } ul # style Li { float : left；宽度：50 px；高度：40 px；线高：40 px；padding:2px边距-left :10 px；border:1px实心# fff文本对齐：居中；color: # fffcursor : pointer } ul # style Li . cur { border :1 px solid # 369；背景-image : URL(images/selected . gif)；背景-repeat : no-repeat；background-position :4 px 32px } ul # style Li #默认{ background-color : # 162934；} ul # style sli # blue { background-color : # 90c 5e 7 } ul # style sli # brown { background-color 3360 # 601 f 00 }使用CSS渲染XHTML，其中ul # styles li.cur指的是当前主题下选择的样式，我用一个小勾号表示当前选择的主题。JQeury首先，我们将介绍jquery库和jquery.cookie插件。jQuery.cookie插件为jQuery提供了强大的cookie操作功能。不需要编写复杂的原生javascript，直接调用插件即可。有关该插件的使用，请阅读本文：

脚本类型=' text/JavaScript ' src=' http : js/jquery . js '/script script type=' text/JavaScript ' src=' http 3360 js/jquery . cookie . js '/脚本接下来，当用户单击开关选择主题时，将发生以下操作：获取所选主题(id)，检查引用的CSS文件，如果title属性值正好等于当前所选主题id值，则应用主题CSS文件，禁用其他引用的CSS请参见以下代码：

$(' # style Li ')。单击(function(){ var style=$(this))。attr(' id ')；$(' link[title=' style ' ']')。remove attr(' disabled ')；$('链接[标题！=' '样式' ']')。attr('disabled '，' disabled ')；$.cookie('mystyle '，style，{ expires :30 })；$(这个)。addClass('cur ')。兄弟姐妹()。remove CLaSS(' cur ')；});注意，在这个例子中，我将选中的样式保存在了用户cookie中，cookie名称为“mystyle”，值为当前选中的主题值，过去的时间为30天，即expires:30，接下来需要做的就是加载页面时读取主题cookie值，如果主题cookie存在，则调用cookie值对应的主题样式CSS文件，将当前主题按钮状态设置为选中，否则调用默认样式。代码如下：

var cookie_style=$。cookie(' my style ')；if(cookie _ style==null){ $(' link[title=' default ']')。remove attr(' disabled ')；$(' # style Li # default ')。add CLaSS(' cur ')；} else { $(' link[title=' cookie _ style ' ']')。remove attr(' disabled ')；$(' # style Li[id=' cookie _ style ' ']')。add CLaSS(' cur ')；$('链接[标题！=' ' ' cookie _ style ' ']')。attr('disabled '，' disabled ')；}将上面两个代码加到$(function(){})上，这里的工作就完成了。值得一提的是，本文应用的cookie记录了用户选择的主题皮肤样式，但是当cookie过期或者用户清除浏览器的COOKIE，或者用户用另一个浏览器浏览时，当前设置的主题将无效。为了让用户永久保存所选主题样式，所选主题必须对应于用户信息并写入数据库。用户下次登录时，可以直接阅读主题。当然，这种方法适用于具有用户权限的系统，如后台管理系统和个人中心。

这是本文的全部内容，非常详细，方便读者理解和阅读。希望大家都能有所收获！