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初级教程之网站品牌列表效果
Aug 02 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jquery实现拖拽添加元素功能
Dec 01 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中spl_autoload_register函数的用法总结
2013/11/07 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python之文字转图片方法
2018/05/10 Python
Python中turtle库的使用实例
2019/09/09 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
写好自荐信需做到的5要点
2014/03/07 职场文书
生物制药专业求职信
2014/03/11 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技