效果体验：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. thinphp框架的项目svn重新检出后的必备配置

    刚刚试着去了解thinkphp框架,在这里做一些笔记,后续有新的总结会更新到这里,如有错误与遗漏,望大家指正. 用thinkphp框架的项目,在用svn重新检出之后,需要进行一些基本配置,方可在本地打 ...

  2. 通过对表格数据的选择对input的value进行修改

    通过对表格数据的选择对input的value进行修改 $(function(){ $("#tb_gys").datagrid({ url:'getGysinfoList.actio ...

  3. MFC的定时器OnTimer

    本文总结来源出自鸡啄米,感谢鸡啄米.来源:http://www.jizhuomi.com/software/232.html 定时器简介 定时器,可以帮助开发者或者用户定时完成某项任务.在使用定时器时 ...

  4. jQuery通过parent()和parents()方法访问父级元素

    <div class="inputGroup"> <p>2.您的最高学历是?</p> <label><input type=& ...

  5. 让低版本的 Android 项目显示出 Material 风格的点击效果

    每天都被不同的需求纠缠的生活是幸福而又不幸的,这不我们家亲爱的设计师们又让我们在低版本的 Android 平台上实现一下类似于 Material Design 的点击效果. 虽然大家都知道 Mater ...

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

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

  7. 如何让ASP.NET Web API的Action方法在希望的Culture下执行

    在今天编辑推荐的<Hello Web API系列教程--Web API与国际化>一文中,作者通过自定义的HttpMessageHandler的方式根据请求的Accep-Language报头 ...

  8. 5分钟用Spring4 搭建一个REST WebService

    前置技能 ① 使用maven来管理java项目 这个技能必须点一级,以便快速配置项目. 本文实际上是我学习Spring的过程中搬的官网上的demo,使用maven配置项目. ② jdk 1.8+   ...

  9. 利用xinetd进行时间同步

    时间同步,往往是大型项目里一个基本的需求:如果现在有多台服务器需要时间同步为标准时间,一般有如下两种做法: 一:NTP服务 将一台能上外网的服务器配成公网时间服务器(譬如:ntp服务配置文件中的0.r ...

  10. WebSocket 介绍(二)-WebSocket API

    这一章介绍如何用WebSocket API来控制协议和创建应用,运用http://websocket.org 提供的现有WebSocket服务器,我们可以收发消息.创建一些简单的WebSocket应用 ...