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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 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 json_decode函数详细解析
2014/02/17 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Djang中静态文件配置方法
2015/07/30 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
学院书画协会部门职责
2013/11/28 职场文书
工作证明格式及范本
2014/09/12 职场文书
2015教师年度考核评语
2015/03/25 职场文书
爱心募捐通知范文
2015/04/27 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书