具体效果如下：

第一次加载如下图：

然后点击天蓝色按钮换成天蓝色皮肤如下图：

然后关闭网页重新打开或者在打开另一个网页如下图：

因为皮肤用Cookie保存了下来，所以不会重置

具体的实现代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>原因在于chrome不支持js在本地操作cookie!</title>
    <!--原因在于chrome不支持js在本地操作cookie!,所以要么在VS运行环境下用chrome，要么用IE等其他浏览器打开-->
    <!--各个皮肤样式文件（css）的引入-->
<link href="css/default.css" rel="stylesheet" type="text/css"  />
<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

<script src="jquery-1.11.3.js" type="text/javascript"></script>
    <!--因为要写入到Cookie，所以我们引入一个jQuery.Cookie.js插件-->
    <script src="js\jquery.cookies.2.2.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var $li = $("#skin li");
            $li.click(function () {
                //当前li元素被选中，添加样式
                $("#" + this.id).addClass("selected")       //去掉其他同辈li元素的选中
                                                    .siblings().removeClass("selected");
                //网页内容换肤（更改样式）
                $("#cssfile").attr("href", "css/" + this.id + ".css");
                
                //将皮肤设置写入Cookie，设置网页皮肤Cookie，Cookie有效期设置为100个小时
                $.cookies.set('MyCssSkin', this.id, { hoursToLive: 100 });
                //$.cookie("MyCssSkin", this.id, { path: '/', expires: 10 });
                //alert("cookie存进去了");
            });
            //读取Cookie，应用保存的皮肤设置
            var cookie_skin = $.cookies.get("MyCssSkin");//读取保存的Cookie
            //alert("读到cookie了");
            //如果存在Cookie
            if (cookie_skin) {
                //当前li元素选中
                $("#" + cookie_skin).addClass("selected")               //  当前的li元素添加选中样式，其他的移除样式
                                                        .siblings().removeClass("selected");
                $("#cssfile").attr("href", "css/" + cookie_skin + ".css");//设置不同皮肤
                $.cookie("MyCssSkin", cookie_skin, { path: '/', expires: 10 });//写入到Cookie
            }
        });
       
     
    </script>

</head>
<body>
    <ul id="skin">
        <li id="skin_0" title="灰色" class="selected">灰色</li>
        <li id="skin_1" title="紫色">紫色</li>
        <li id="skin_2" title="红色">红色</li>
        <li id="skin_3" title="天蓝色">天蓝色</li>
        <li id="skin_4" title="橙色">橙色</li>
        <li id="skin_5" title="淡绿色">淡绿色</li>
    </ul>
    <div id="div_side_0">
        <div id="news">
            <h1 class="title">时事新闻</h1>
        </div>
    </div>
    <div id="div_side_1">
        <div id="game">
            <h1 class="title">娱乐新闻</h1>
        </div>
    </div>
</body>
</html>

需要的附件
唉。。竟然没有上传文件的。。无语

Cookies插件使用方法：

1. 不用说，首先你得下载jQuery及Cookies插件。

2. 在网页的<body>前加上：

<script type="text/javascript" src="http://513394217.blog.163.com/blog/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://513394217.blog.163.com/blog/jquery.cookies.2.2.0.min.js"></script>

src=后面的那一长串就是下载的jQuery和Cookies插件的文件名，如果你和我不一样就改改。

3. 如何添加/修改cookie并设定过期时间：

$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 100 });

上面是添加或修改一个cookie，并将其过期/失效时间设定在100小时之后，注意大括号是必须的。

过期失效时间还有另外一个设置方式，指定一个绝对时间：

expireDate = new Date();
expireDate.setTime( expireDate.getTime() + ( 100 * 60 * 60 * 1000 ) );

$.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});

expireAt参数精确到毫秒。大括号里还可以添加path, domain, secure等参数，这里不做介绍。如果hoursToLive和expiresAt都指定了，则以expiresAt为准。

4. 如何获取cookie

$.cookies.get('cookie_id');

5. 如何删除cookie

$.cookies.del('cookie_id');

网页换肤,模块换肤,jQuery的Cookie插件使用（转）的更多相关文章

  1. jQuery：cookie插件的使用

    Jquery插件就是在Jquery基础之上,开发的基于Jquery的javascript库. 在Jquery中,引入cookie插件后,可以很方便的定义某个cookie的名称,并设置cookie值.通 ...

  2. jquery的cookie插件

    一.JS文件 /*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2 ...

  3. 【jQuery】cookie插件

    通过该插件的学习使我对cookie.Date().getDate().setDate().toUTCString()有了更直观的了解,具体分析见注释: function(key, value, opt ...

  4. jquery.cookie.js——jquery的cookie插件

    一.JS文件 /*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2 ...

  5. JQuery：cookie插件

    JQuery居然没有操作cookie相关的函数,搜了下官方有个cookie的插件. 简单使用方法: <head> <title>JQuery-Cookie插件</titl ...

  6. cookie操作（jquery的cookie插件源码）

    cookie : function (key, value, options) { var days, time, result, decode; // A key and value were gi ...

  7. jQuery之换肤与cookie插件

    有时候一个网页可以有多个皮肤进行选择,也就是不同的背景,或是一整套新的css,能使整个页面变成另一种风格. 这个功能可以用jQuery来实现.外加cookie插件.有了cookie,就可以长时间的保存 ...

  8. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  9. Croppic – 免费开源的 jQuery 图片裁剪插件

    Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData  对 ...

随机推荐

  1. Mysql增量写入Hdfs（一） --将Mysql数据写入Kafka Topic

    一. 概述 在大数据的静态数据处理中,目前普遍采用的是用Spark+Hdfs(Hive/Hbase)的技术架构来对数据进行处理. 但有时候有其他的需求,需要从其他不同数据源不间断得采集数据,然后存储到 ...

  2. win7 64 位操作系统，进程System，PID为4，扫描连接局域网ip地址的139和445端口

    偶然发现电脑的System进程不间断扫描连接局域网内的其它IP对应的445和139端口,这是个问题. 上网搜索,立即关闭139端口的监听. 方法如下: 本地连接属性-TCP/IP属性-高级-WINS选 ...

  3. Linux内核同步机制之（五）：Read Write spin lock【转】

    一.为何会有rw spin lock? 在有了强大的spin lock之后,为何还会有rw spin lock呢?无他,仅仅是为了增加内核的并发,从而增加性能而已.spin lock严格的限制只有一个 ...

  4. win10 系统 wifi自动断开连接 wifi热点不稳定

    我的系统的电脑是win10系统,笔记本 下载了一个wifi共享大师,但是wifi总是自动断,于是就找了找问题所在 在网上看了许多方案,大多数都是    在   电源管理  把[允许计算机关闭此设备以节 ...

  5. Angular的项目结构

    前面我们已经在我们想要的位置顺利的创建了Angular项目,现在我们就来看一下项目的结构吧. 下面使我们项目的整体结构,包括node的模板.src资源文件以及配置文件等. 下面是根目录文件夹内的文件用 ...

  6. Docker的使用初探（二）：Docker与.NET Core的结合

    目录 Docker的使用初探(二):Docker与.NET Core的结合 添加Dockefile 1. 在创建项目时添加 2. 手动添加 3. 容器业务流程协调控制程序支持 Dockefile语法 ...

  7. RabbitMQ集群搭建和使用

    一.环境准备 1.选择RabbitMQ的版本 http://www.rabbitmq.com/changelog.html 注: 不同版本的Linux选择的RabbitMQ版本也不同,参照 http: ...

  8. 明天研究下jpa直接像django一样生成

    https://blog.csdn.net/yztezhl/article/details/79390714 自动生成 教程-- https://blog.csdn.net/mxjesse/artic ...

  9. leetcode 169. Majority Element 、229. Majority Element II

    169. Majority Element 求超过数组个数一半的数 可以使用hash解决,时间复杂度为O(n),但空间复杂度也为O(n) class Solution { public: int ma ...

  10. 多线程学习笔记-深入理解ThreadPoolExecutor

    java多线程中,线程池的最上层接口是Executor,ExecutorService实现了Executor,是真正的管理线程池的接口,ThreadPoolExecutor间接继承了ExecutorS ...