jQuery+Cookie实现切换皮肤功能【附源码下载】


Posted in jQuery onMarch 25, 2018

本文实例讲述了jQuery+Cookie实现切换皮肤功能。分享给大家供大家参考,具体如下:

最近在学习Jquery,发现Jquery真的是非常强大,短短几行代码就能实现切换皮肤的功能。

1)关键代码

<!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>3water.com jQuery Cookie切换皮肤</title>
 <link id="cssfile" href="Styles/Skins/skin_0.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <link href="Styles/Site.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">
  $(function () {
   $('#skin>li').click(function () {
    var skinID = this.id;
    switchSkin(skinID);
   });
   var skinID = $.cookie("skinID"); //获取cookie
   if (skinID) {//如果cookie存在,切换皮肤
    switchSkin(skinID);
   }
  });
  function switchSkin(skinID) {
   $('#' + skinID).addClass('selected')
       .siblings().removeClass('selected');
   var cssHref = 'Styles/Skins/' + skinID + '.css';
   $('#cssfile').attr('href', cssHref);
   $.cookie("skinID", skinID, { path: "/", expires: 10 }); //将皮肤样式的id保存到cookie中
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="header">
  hello world!
  <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>
 </form>
</body>
</html>

运行效果:

jQuery+Cookie实现切换皮肤功能【附源码下载】

2)完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
jquery的 filter()方法使用教程
Mar 22 #jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
jQuery替换节点元素的操作方法
Mar 18 #jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
JS分页效果示例
2013/10/11 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
会计自我鉴定范文
2013/10/06 职场文书
个人委托书
2014/07/31 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
思想工作总结范文
2015/08/12 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
《我是什么》教学反思
2016/02/16 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python