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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery实现日历效果
Sep 11 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php判断目录存在的简单方法
2019/09/26 PHP
js验证表单大全
2006/11/25 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
拖动时防止选中
2017/02/03 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python正则表达式使用范例分享
2016/12/04 Python
python九九乘法表的实例
2017/09/26 Python
Python Grid使用和布局详解
2018/06/30 Python
详解Python字典的操作
2019/03/04 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
技校毕业生个人学习的自我评价
2014/02/21 职场文书
消防安全责任书
2014/04/14 职场文书
公司财务经理岗位职责
2015/04/08 职场文书