jquery cookie实现的简单换肤功能适合小网站


Posted in Javascript onAugust 25, 2013

前段时间试着使用jquery cookie的时候,做了一个简单的换肤功能,只适合小网站并且代码低级。

首先引入jquery和cookie插件

<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script> 
<script type="text/javascript" src="__PUBLIC__/js/cookie.js"></script>

准备几个css文件
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/basic2.css" id="f">

网页中的body部分准备几个button按钮用于触发jquery
<button>风格一</button><button>风格二</button>

jquery代码
$(document).ready(function(){ 
$("#button1").click( 
function(){ 
$.cookie('cssfile','basic2.css');//存入cookie 
location.reload(); //刷新页面 
} 
); 
$("#button2").click( 
function(){ 
$.cookie('cssfile','basic.css'); 
location.reload(); 
} 
); 
}); 
$(document).ready( 
function(){ 
var file=$.cookie('cssfile'); //读取cookie 
if(typeof file=="undefined") 
{ 
var cssfile="__PUBLIC__/css/basic2.css"; //没有设置,读取默认css 
} 
else 
{ 
var cssfile="__PUBLIC__/css/"+file; //设置过的cookie 
} 
$("#f").attr("href",cssfile); 
} 
);

点击获取jquery cookie插件
点击获取jquery或者使用jquery在谷歌或者微软的托管
Microsoft CDN:
-------------------------------------------------------------------------------
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

Google CDN:
--------------------------------------------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
javascript jq 弹出层实例
Aug 25 #Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 #Javascript
JS操作JSON要领详细总结
Aug 25 #Javascript
JS 两个字符串时间的天数差计算
Aug 25 #Javascript
js中onload与onunload的使用示例
Aug 25 #Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 #Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php探针不显示内存解决方法
2019/09/17 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python按照多个条件排序的方法
2019/02/08 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
行政办公室岗位职责
2014/03/18 职场文书
租房协议书怎么写
2014/04/10 职场文书
老公保证书范文
2014/04/29 职场文书
网络编辑求职信
2014/04/30 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
村安全生产责任书
2014/08/25 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
护士辞职信怎么写
2015/02/27 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript