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

查看演示DEMO：https://www.helloweba.net/demo/style-switch/

实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题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实现无刷新切换主题皮肤功能的更多相关文章

  1. Android 实现切换主题皮肤功能（类似于众多app中的 夜间模式，主题包等）

    首先来个最简单的一键切换主题功能,就做个白天和晚上的主题好了. 先看我们的styles文件: <resources> <!-- Base application theme. --& ...

  2. jquery页面无刷新切换皮肤并保存

    效果体验:http://runjs.cn/detail/hijgcghe <!DOCTYPE html> <html> <head> <meta http-e ...

  3. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  4. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

  5. jQuery.pager无刷新分页

    刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...

  6. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  7. jQuery Ajax无刷新操作

    下面是“无刷新登录”的例子,采用Ashx+jQuery Ajax实现. //后台实例代码 ashx文件(可替换为从数据库中读取) public void ProcessRequest(HttpCont ...

  8. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  9. ionic动态切换主题皮肤

    本来想通过css自定义属性值: :root{ --red:red; } p{ color:var(--red); } div{ background:var(--red); } 在ionic2设置动态 ...

随机推荐

  1. MySQL数据库查询操作进阶——多表查询

    多表查询 在大部分情况下,我们用到的表都是彼此相关联的,所以我们会有相当大的需求用到跨表的查询,这个时候我们就需要将相关联的表连起来做多表查询. 多表查询分为连表查询和子查询,连表查询即将相关联的表连 ...

  2. 002-linux命令-文件和目录、查看文件内容-文件和目录、查看文件内容

    一.文件和目录 cd /home :进入‘/home’目录 cd .. 返回上一级目录 cd ../..返回上两级目录 cd 进入个人的主目录 cd ~user1进入个人的主目录 cd - 返回上次所 ...

  3. PHP MYSQL 临时表的使用

    /** * 临时表:用于获取爱鸽登录分类数量 */ $temporaryTableName = uniqid('temporary_'); $model = M(); $model->execu ...

  4. 如何使用向量代表文档doc或者句子sentence

    1.“句向量”简介word2vec提供了高质量的词向量,并在一些任务中表现良好. 关于word2vec的原理可以参考这几篇论文: https://arxiv.org/pdf/1310.4546.pdf ...

  5. [LeetCode] 209. Minimum Size Subarray Sum_Medium

    Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...

  6. TextCNN

    一.什么是TextCNN? 将卷积神经网络CNN应用到文本分类任务,利用多个不同size的kernel来提取句子中的关键信息(类似于多窗口大小的ngram),从而能够更好地捕捉局部相关性. 二.Tex ...

  7. 梯度下降法(BGD、SGD)、牛顿法、拟牛顿法（DFP、BFGS）、共轭梯度法

    一.梯度下降法 梯度:如果函数是一维的变量,则梯度就是导数的方向:      如果是大于一维的,梯度就是在这个点的法向量,并指向数值更高的等值线,这就是为什么求最小值的时候要用负梯度 梯度下降法(Gr ...

  8. SSH异常处理（一）

    Could not locate getter method for property [com.test_SSH.Employee#createTime] 这个异常是实体类没有映射到对应的.hbm. ...

  9. netcore swagger xml发布丢失问题

    1.netcore2.1.2,swagger.aspnetcore 1.1.0版本.发布netcore项目时swagger的接口文档xml 遗漏,始终发布不上去.后来查阅资料,讲的好像是netcore ...

  10. Vivado的安装程序没反应怎么办

    在Windows操作系统上,在安装Vivado的时候会遇到双击xsetup.exe没有反应的情况,即使是用管理员权限再加上设置兼容模式也没有任何效果,且此问题有可能在多个版本上都存在,包括最新的201 ...