经过使用，靠谱！

<!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>

jQuery切换网页皮肤并保存到Cookie示例代码的更多相关文章

  1. jQuery切换网页皮肤保存到Cookie实例

    效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/25.htm 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  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. JS和Jquery获取和修改label的值的示例代码

    abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源:  <  JS和Jquery获取和修改label的值的示例代码  & ...

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

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

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

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

  9. jquery数组之存放checkbox全选值示例代码

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...

随机推荐

  1. Photoshop像素级画笔工具

    1.直线工具 2.选择颜色,选择像素 dd

  2. Ubuntu 14.04 登陆界面循环问题解决

    今天手贱startx然后虚拟机就卡死了,再开输过密码就无限跳到登陆界面,其他账户可用.怀疑/home未挂载. 解决方法:(alf改成你的用户名) $ cd ~$ sudo chown alf:alf. ...

  3. CoreJavaE10V1P3.8 第3章 Java的基本编程结构－3.8 控制流程（Control Flow）

    通过使用条件语句.循环语句可以实现流程的控制. 3.8.1 块作用域(Block Scope) 块(Block)就是由一对花括号包围起来的部分.他指定了一个变量的生存范围,与一个方法的操作范围. Ja ...

  4. 常见的 http 状态码

    1~5开头的HTTP状态码分别表示: 1XX 表示消息 2XX 表示成功 3XX 表示重定向 4XX 表示请求错误 5XX 表示服务端错误 常见的HTTP状态码: 200 OK 表示请求成功 一切正常 ...

  5. 各类数据库url

    msql: jdbc:mysql://127.0.0.1:3306/databaseName ms-sql jdbc:microsoft:sqlserver://127.0.0.1:1433;Data ...

  6. Centos 7 系统安装完毕修改网卡名为eth0

    从CentOS/RHEL7起,可预见的命名规则变成了默认.这一规则,接口名称被自动基于固件,拓扑结构和位置信息来确定.现在,即使添加或移除网络设备,接口名称仍然保持固定,而无需重新枚举,和坏掉的硬件可 ...

  7. IOS开发调整UILabel的行间距

    CGFloat heih = 20;   NSString * cLabelString = @"这是测试UILabel行间距的text.这是测试UILabel行间距的text.n 这是测试 ...

  8. 【转】Jmeter（三）-简单的HTTP请求(非录制)

    首先建立一个线程组(Thread Group),为什么所有的请求都要加入线程组这个组件呢?不加不行吗?答案当然是不行的.因为jmeter的所有任务都必须由线程处理,所有任务都必须在线程组下面创建. 选 ...

  9. IntelliJ Idea 14 安装 Golang 插件 google-go-lang-idea-plugin 的方法

    IDEA 的编辑器都很强悍,所以现在学Go 也想用他啊,无奈这个插件搞了好久,整理了下流程记录下 1. 当然是下载 IDEA 编辑器了 http://www.jetbrains.com/idea/do ...

  10. 安卓---Tabhost实现页面局部刷新--父页子页之间的传值

    TabHost的实现分为两种,一个是不继承TabActivity,一个是继承自TabActivity:当然了选用继承自TabActivity的话就相对容易一些,下面来看看分别是怎样来实现的吧. 我只写 ...