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

以下是源代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" >

 <head>

     <title>jquery实现页面皮肤切换并保存-柯乐义</title><base target="_blank" />

     <link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/default.css" rel="stylesheet" type="text/css" />

     <link href="http://keleyi.com/keleyi/phtml/jqtexiao/25/css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />

     <!--   引入jQuery -->

     <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>

     <!--   引入jQuery的cookie插件 -->

     <script src="http://keleyi.com/keleyi/phtml/jqtexiao/25/js/jquery.cookie.js" type="text/javascript"></script>

     <script type="text/javascript">

         //<![CDATA[

         $(function(){

             var $li =$("#skin li");

             $li.click(function(){

                 switchSkin( this.id );

             });

             var cookie_skin = $.cookie( "MyCssSkin");

             if (cookie_skin) {

                 switchSkin( cookie_skin );

             }

         });

         function switchSkin(skinName){

                  $("#"+skinName).addClass("selected")                 //当前<li>元素选中

                               .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中

                  $("#cssfile").attr("href", "http://keleyi.com/keleyi/phtml/jqtexiao/25/css/" + skinName + ".css"); //设置不同皮肤

                 $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });

         }

         //]]>

     </script>

 </head>

 <body>

 <div><h2>jQuery皮肤无刷新切换并保存</h2>

 <div>请点击下面的各种演示的小方框设定以下内容的皮肤,当关闭页面后再开，以下内容还是设定的颜色。因为保存到cookie，所以一段时间后打开页面，仍然为最后设置的眼色。

 <br /><a href="http://keleyi.com/keleyi/phtml/jqtexiao/25.htm" style="color:blue;text-decoration:none;">新开在线体验窗口</a></div></div>

     <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"><a href="http://keleyi.com/menu/jquery/">jQuery</a></h1>

         </div>

     </div>

     <div id="div_side_1">

         <div id="game">

             <h1 class="title"><a href="http://keleyi.com/a/bjad/ifjrn3s1.htm">原文</a></h1>

         </div>

     </div>

 </body>

 </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. Eos开发——ajax请求

    function saveData(){ form.validate(); if(form.isValid()==false) return; var persons = grid.getChange ...

  2. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  3. 替代jquery1.9版本以前的toggle事件函数（开关）

    以上文章为转载自http://blog.sina.com.cn/s/blog_50042fab0101c7a9.html var flag=1; $(".selector").cl ...

  4. 谈谈StringBuffer和StringBuilder

    (1) 速度 在执行速度方面的比较:StringBuilder > StringBuffer > String ①String 是不可变的对象(String类源码中存放字符的数组被声明为f ...

  5. The transaction log for database 'tempdb' is full due to 'ACTIVE_TRANSACTION'

    今天早上,Dev跟我说,执行query statement时出现一个error,detail info是: “The transaction log for database 'tempdb' is ...

  6. LINQ系列：Linq to Object相等操作符

    相等操作符通过比较两个序列来检查它们相应的元素是否相同.如果两个序列有相同的元素,并且对应元素的值相同,则认为这两个序列是相等的. SequenceEqual操作符判定两个集合是否相等.判定是通过并行 ...

  7. Minor【 PHP框架】5.事件

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  8. 深入理解javascript中的富文本编辑

    前面的话 一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档.实际上差不多就是这样.富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所 ...

  9. 【原创】开源.NET排列组合组件KwCombinatorics使用(三)——笛卡尔积组合

           本博客所有文章分类的总目录:本博客博文总目录-实时更新 本博客其他.NET开源项目文章目录:[目录]本博客其他.NET开源项目文章目录 KwCombinatorics组件文章目录: 1. ...

  10. Cookie/Session机制详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...