效果体验：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. List-style-type属性失效

    异常处理汇总-前端系列:http://www.cnblogs.com/dunitian/p/4523015.html 看重点: 根本原因:padding: 0 0 0 0px; 解决:list-sty ...

  2. Newtonsoft.json中 linq to json 和序列化哪个快？

    Newtonsoft.json是最常用的json序列化组件,当然他不是最快的,但是是功能最全的.. using System; using System.Collections.Generic; us ...

  3. 小谈MVC 模式

    MVC (Modal View Controler) 本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使 ...

  4. OpenNURBS 3DM Viewer

    OpenNURBS 3DM Viewer eryar@163.com Abstract. The openNURBS Toolkit consists of C++ source code for a ...

  5. Android的PopWindow动画实现

    转载博客:http://www.open-open.com/lib/view/open1423626956186.html 1.实现步骤 1.主布局activity_main.xml <Rela ...

  6. android给View设置边框 填充颜色 弧度

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  7. How to write perfect C code

    Several days ago, I was involved in an argument about choice of C or C++. What I ignored was "l ...

  8. 在Linux中运行Nancy应用程序

    最近在研究如何将.NET应用程序移植到非Windows操作系统中运行,逐渐会写一些文章出来.目前还没有太深的研究,所以这些文章大多主要是记录我的一些实验. 这篇文章记录了我如何利用NancyFx编写一 ...

  9. ASP.NET MVC 混搭 ASP.NET WebForms 所导致的 Html.ActionLink/BeginForm 问题

    首先,需要了解下这篇博文:<ASP.NET WebForms MapPageRoute 路由配置> 之前,在 ASP.NET MVC 中混搭 ASP.NET WebForms,使用 Map ...

  10. iOS UIWebView 拦截点击事件(双击缩放)

    在平时的开发中,要使用到webview,但类似微信的webview在数据没有加载完成的时候 双击屏幕,webview不会缩放,其实实现这个功能很简单 代码是用swift写的 class YYSimpl ...