jQuery+Cookie实现切换皮肤功能

这篇文章主要介绍了jquery+cookie实现切换皮肤功能,结合完整实例形式分析了jquery结合cookie动态变换页面元素样式的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下

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

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

1)关键代码

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> www.jb51.net jQuery Cookie切换皮肤       $(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中  }  

登录后复制

运行效果:

jQuery+Cookie实现切换皮肤功能

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】

vue页面加载闪烁问题的解决方法

浅谈js获取ModelAndView值的问题

以上就是jQuery+Cookie实现切换皮肤功能的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2754877.html

(0)
上一篇 2025年3月8日 07:05:43
下一篇 2025年3月8日 07:05:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue实现搜索 和新闻列表功能简单范例

    本文通过实例代码给大家介绍了vue实现搜索 和新闻列表功能简单范例,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧 效果图如下所示:   无标题页     .box { width: 900px; height: auto; overf…

    2025年3月8日
    200
  • 如何使用js封装ajax功能函数与用法

    这次给大家带来如何使用js封装ajax功能函数与用法,使用js封装ajax功能函数与用法的注意事项有哪些,下面就是实战案例,一起来看一下。 AJAX = Asynchronous JavaScript and XML(异步的 JavaScr…

    编程技术 2025年3月8日
    200
  • 基于IView中on-change属性的使用详解

    下面我就为大家分享一篇基于iview中on-change属性的使用详解,具有很好的参考价值,希望对大家有所帮助。 本人android开发出身,因工作需要,后台前端的代码也都有涉猎,这两天一直被input标签中的onchange困扰的头昏脑胀…

    编程技术 2025年3月8日
    200
  • 解决iView中时间控件选择的时间总是少一天的问题

    下面我就为大家分享一篇解决iview中时间控件选择的时间总是少一天的问题,具有很好的参考价值,希望对大家有所帮助。 今天在用iview做前端页面开发的时候,遇到一个奇葩问题(也许自己主要做后台开发,当时我还纳闷了),我在时间控件中明明选择的…

    2025年3月8日
    200
  • iview日期控件,双向绑定日期格式的方法

    下面我就为大家分享一篇iview日期控件,双向绑定日期格式的方法,具有很好的参考价值,希望对大家有所帮助。 日期在双向绑定之后格式为:2017-07-03T16:00:00.000Z 想要的格式为2017-07-04 调了好久,几乎一天:用…

    编程技术 2025年3月8日
    200
  • vue iview组件表格 render函数的使用方法详解

    下面我就为大家分享一篇vue iview组件表格 render函数的使用方法详解,具有很好的参考价值,希望对大家有所帮助。 如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是…

    编程技术 2025年3月8日
    200
  • 微信小程序实现换肤功能

    这篇文章主要为大家详细介绍了微信小程序实现换肤功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css;把当前皮肤类型存入本地;然后通过js读取并判断当前应…

    2025年3月8日
    200
  • iview table高度动态设置方法

    下面我就为大家分享一篇iview table高度动态设置方法,具有很好的参考价值,希望对大家有所帮助。 在使用iview table表格组件的时候,由于我的屏幕分辨率比较大,在自己pc机上设置的固定高度很适合,在测试(test)时候发现在别…

    2025年3月8日
    200
  • JS实现的集合去重,交集,并集,差集功能示例

    这篇文章主要介绍了js实现的集合去重,交集,并集,差集功能,结合实例形式分析了javascript基于数组实现的集合去重、交集、并集、差集等相关实现技巧,需要的朋友可以参考下 本文实例讲述了JS实现的集合去重,交集,并集,差集功能。分享给大…

    编程技术 2025年3月8日
    200
  • angular5 httpclient的示例实战

    本篇文章主要介绍了angular5 httpclient的示例实战,现在分享给大家,也给大家做个参考。 从angular 4.3.0 以后的版本开始使用httpclient,替换了之前的http,引用的包路径已经变为了angular/com…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论