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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
HTML中事件触发列表与解说
Jul 09 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
详解JavaScript函数对象
Nov 15 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 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
2021年最新CPU天梯图
2021/03/04 数码科技
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
PHP session会话的安全性分析
2011/09/08 PHP
php邮件发送的两种方式
2020/04/28 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python web基础之加载静态文件实例
2018/03/20 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
使用Python pip怎么升级pip
2020/08/11 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
年度考核自我鉴定
2014/02/02 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
初一新生军训方案
2014/05/22 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android