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实现的一个导航滚动效果具体代码
May 27 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
js实现查询商品案例
Jul 22 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内存管理之谁动了我的内存
2013/06/20 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
newxtree.js代码
2007/03/13 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
大学生入党思想汇报
2014/01/14 职场文书
公司接待方案
2014/03/08 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL