效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/25.htm

以下是源代码：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml" >
  3.  <head>
  4.      <title>jquery实现页面皮肤切换并保存-柯乐义</title><base target="_blank" />
  5.      <link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/default.css" rel="stylesheet" type="text/css" />
  6.      <link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
  7.      <!--   引入jQuery -->
  8.      <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
  9.      <!--   引入jQuery的cookie插件 -->
  10.      <script src="http://keleyi.com/keleyi/phtml/jqtexiao/25/js/jquery.cookie.js" type="text/javascript"></script>
  11.      <script type="text/javascript">
  12.          //<![CDATA[
  13.          $(function(){
  14.              var $li =$("#skin li");
  15.              $li.click(function(){
  16.                  switchSkin( this.id );
  17.              });
  18.              var cookie_skin = $.cookie( "MyCssSkin");
  19.              if (cookie_skin) {
  20.                  switchSkin( cookie_skin );
  21.              }
  22.          });
  23.          function switchSkin(skinName){
  24.                   $("#"+skinName).addClass("selected")                 //当前<li>元素选中
  25.                                .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
  26.                   $("#cssfile").attr("href", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ".css"); //设置不同皮肤
  27.                  $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
  28.          }
  29.          //]]>
  30.      </script>
  31.  </head>
  32.  <body>
  33.  <div><h2>jQuery皮肤无刷新切换并保存</h2>
  34.  <div>请点击下面的各种演示的小方框设定以下内容的皮肤,当关闭页面后再开，以下内容还是设定的颜色。因为保存到cookie，所以一段时间后打开页面，仍然为最后设置的眼色。
  35.  <br /><a href="http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style="color:blue;text-decoration:none;">新开在线体验窗口</a></div></div>
  36.      <ul id="skin">
  37.          <li id="skin_0" title="灰色" class="selected">灰色</li>
  38.          <li id="skin_1" title="紫色">紫色</li>
  39.          <li id="skin_2" title="红色">红色</li>
  40.          <li id="skin_3" title="天蓝色">天蓝色</li>
  41.          <li id="skin_4" title="橙色">橙色</li>
  42.          <li id="skin_5" title="淡绿色">淡绿色</li>
  43.      </ul>
  44.  
  45.      <div id="div_side_0">
  46.          <div id="news">
  47.              <h1 class="title"><a href="http://keleyi.com/menu/jquery/">jQuery</a></h1>
  48.          </div>
  49.      </div>
  50.  
  51.      <div id="div_side_1">
  52.          <div id="game">
  53.              <h1 class="title"><a href="http://keleyi.com/a/bjad/ifjrn3s1.htm">原文</a></h1>
  54.          </div>
  55.      </div>
  56.  
  57.  </body>
  58.  </html>

转载自：http://keleyi.com/a/bjad/ifjrn3s1.htm

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

jQuery切换网页皮肤保存到Cookie实例的更多相关文章

  1. jQuery切换网页皮肤并保存到Cookie示例代码

    经过使用,靠谱! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. 【锋利的JQuery-学习笔记】切换网页皮肤-且保存于Cookie

    切换网页皮肤: html片段: <head> <link rel="stylesheet" href="styles/skin/skin_0.css&q ...

  3. 个人学习记录1：二维数组保存到cookie后再读取

    二维数组保存到cookie后再读取 var heartsArray = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0],[0,0, ...

  4. 将用户信息保存到Cookie中

    /** * 把用户保存到Cookie * * @param request * @param response * @param member */ private void rememberPwdA ...

  5. 监听页面中的某个div的滚动事件，并将其滚动距离保存到cookie

    在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type ...

  6. 通过设置PHPSESSID保存到cookie实现免登录

    $cookieParams = session_get_cookie_params(); session_set_cookie_params( 3600,// 设置sessionID在cookie中保 ...

  7. jquery 实现页面拖拽并保存到cookie

    实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...

  8. 网上找到的一个jquery版网页换肤特效

    这个跟我之前在锋利的JQuery那本书里看到的那个一模一样. <!DOCTYPE html> <html> <head> <meta name="& ...

  9. jQuery实现无刷新切换主题皮肤功能

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

随机推荐

  1. weblogic配置数据源

    启动weblogic 管理服务器,使用管理用户登录weblogic管理控制台   打开管理控制台后,在左侧的树形域结构中,选择服务->数据源. 在右侧的窗口中,选择 新建->一般数据源   ...

  2. 日历组件 原生js

    自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...

  3. Utility3：Understand Dashboard Report

    To see data in the SQL Server Utility dashboard, select the top node in the Utility Explorer tree - ...

  4. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  5. java静态代理与动态代理

    原文链接:http://www.orlion.ga/207/ 一.代理模式 代理模式是经常用到的设计模式,代理模式是给指定对象提供代理对象.由代理对象来控制具体对象的引用. 代理模式涉及到的角色: 抽 ...

  6. Why Namespace? - 每天5分钟玩转 OpenStack（102）

    上一节我们讨论了 Neutron 将虚拟 router 放置到 namespace 中实现了不同 subnet 之间的路由.今天探讨为什么要用 namespace 封装 router? 回顾一下前面的 ...

  7. 重磅开源:TN文本分析语言

    tn是desert(沙漠之鹰)和tan共同开发的一种用于匹配,转写和抽取文本的语言(DSL).并为其开发和优化了专用的编译器.基于递归下降方法和正则表达式,能解析自然文本并转换为树和字典,识别时间,地 ...

  8. Introduction to the Service Provider Interfaces--官方文档

    地址:https://docs.oracle.com/javase/tutorial/sound/SPI-intro.html What Are Services? Services are unit ...

  9. js 中类似时钟的显示

    先上代码 <!DOCTYPE html> <html> <head> <script> function startTime() { var today ...

  10. Android之仿ele地图定位效果

    PS:最近项目要求,希望在选择地址的时候能够仿ele来实现定位效果.因此就去做了一下.不过ele使用高德地图实现的,我是用百度地图实现的.没办法,公司说用百度那就用百度的吧.个人觉得高德应该更加的精准 ...