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


Posted in Javascript onJune 16, 2014

以下是源代码:

<!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>
Javascript 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 #Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 #Javascript
js中的如何定位固定层的位置
Jun 15 #Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 #Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 #Javascript
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
C#的几个面试问题
2016/05/22 面试题
预防传染病方案
2014/06/14 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL