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 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
Vue事件修饰符native、self示例详解
Jul 09 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 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实现的短网址算法分享
2014/06/20 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python中的super()方法使用简介
2015/08/14 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Python WSGI的深入理解
2018/08/01 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
用C语言实现文件读写操作
2013/10/27 面试题
药学专业个人自我评价
2013/11/11 职场文书
大学在校生求职信范文
2013/11/21 职场文书
创业计划书如何编写
2014/02/06 职场文书
小学生作文评语
2014/04/18 职场文书
计生专干事迹
2014/05/28 职场文书
班训口号大全
2014/06/18 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL