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 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 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
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
PHP基础知识介绍
2013/09/17 PHP
php绘制圆形的方法
2015/01/24 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
物流管理应届生求职信
2013/11/07 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
golang中的空接口使用详解
2021/03/30 Python
Python import模块的缓存问题解决方案
2021/06/02 Python
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js