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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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 HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
奇妙的js
2007/09/24 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
使用python实现ANN
2017/12/20 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
python单例模式的多种实现方法
2019/07/26 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
求职简历的自我评价
2014/01/31 职场文书
社区工作感言
2014/02/21 职场文书
读书小明星事迹材料
2014/05/03 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
七年级英语教学反思
2016/02/15 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android