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.Ajax()的data参数类型详解
Jul 23 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jquery实现图片放大镜效果
Dec 23 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
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
初识Node.js
2015/03/20 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python中集合类型(set)学习小结
2015/01/28 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python延时操作实现方法示例
2018/08/14 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python实现共轭梯度法
2019/07/03 Python
python时间日期操作方法实例小结
2020/02/06 Python
new修饰符是起什么作用
2015/06/28 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
集体生日活动方案
2014/08/18 职场文书
儿童诗两首教学反思
2016/02/23 职场文书