jquery实现切换皮肤

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1k累计阅读 1k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄9年

关注

VIP免费原创最新推荐文章于 2023-10-03 19:59:30 发布 1k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

这是帮其他组实现的一个小功能，这边记录一下给做同样功能的一个参考好了。
代码地址：https://github.com/liwei26/jquery-change-skin
目前大多数jquery实现换肤思路都是将所有样式文件引入，然后切换样式文件显隐来实现样式的切换，我觉得把所有样式文件都引入不太好，所以做了些改动。大体思路是通过切换皮肤的id来加载对应样式文件。
首先我们需要的依赖库有jquery，jquery-cookie，文件目录格式如下

文件目录格式
style里面有两个不同样式文件，分别对应模板skin1，skin2,（注意：css样式文件夹名与后面换肤按钮id相同）
js文件下的changeskin.js为实现换肤的js文件
然后实现换肤

在头部引入默认样式 skin1 并给 link 加上 id

<link rel="stylesheet" href="./style/skin1/index.css" id="skin_css_file">

给换肤按钮添加id


    <div id='change-skin'>
      <span class="skin">换肤</span>
      <ul id="hide" class='display'>
        <li id="skin1" style="list-style: none">模板一</li>
        <li id="skin2" s

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#jquery #前端

jQuery实现百度换肤效果（动态改变背景图片）与原生js实现比较实现效果如下： jQuery实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt... 阅读详情

相关推荐

使用jQuery实现动态切换网页皮肤

通过使用jQuery，我们可以轻松实现动态切换网页皮肤的功能。通过准备不同的皮肤样式文件，并通过jQuery代码切换这些文件的引用，我们可以让用户自由选择适合自己的网页皮肤。在本文中，我们将介绍如何使用jQuery编程来实现动态切换网页皮肤的功能。通过这种实现方式，用户可以自由选择不同的皮肤样式，以适应个人喜好或特定需求。最后，保存并运行HTML文档，点击切换按钮，您应该能够看到页面的皮肤样式会随之切换。现在，我们将编写jQuery代码来实现当用户点击切换按钮时，切换不同的皮肤样式。来跟踪当前的皮肤样式。

CyberJolt的博客 193

jQuery实现的网页换肤效果示例

主要介绍了jQuery实现的网页换肤效果,结合完整实例形式分析了jQuery通过修改link标签的href属性值实现换肤效果的相关技巧,需要的朋友可以参考下

jquery 换肤功能

实现web页面开发功能，并加入cookie

jQuery实现换肤功能(使用cookie.js插件)

上一次和大家分享了如何实现换肤功能，但是

u013841514的专栏 786

JQuery特效之七----换肤功能

前端三大组成 html构建内容，css美化，js控制交互，jquery是一个常用js库。 html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

Eric 684

jquery实现简单换肤特效

index代码: html> html lang="en"> head> meta charset="UTF-8"> title>换肤title> link rel="stylesheet" type="text/css" href="css/index.css"> script src="js/jquery-3.1.1.min.js" type="text/

谁抢了我的网名 426

jQuery实现无刷新切换主题皮肤功能

主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主

￡渚∮薰￡ 2171

jquery实现网页换肤效果

记得以前腾讯网页上有个根据用户心情自定义换皮肤颜色,感觉这个用户体验蛮好的,给出几套样式,由用户自己选择渲染的样式.对腾讯的前端开发们很是赞叹.话说现在腾讯不知道咋的,去掉这个功能了,没事现在jquery博客给大家用jquery来实现这个效果.转自http://www.jqueryba.com/

jQuery实现网站换肤功能

jQuery实现网站换肤功能，点击可更换三种皮肤

jQuery实现网站换肤功能.zip

jQuery实现网站换肤功能

用JQuery 实现 COOKIE 的本地保存 -页面切换皮肤保存记录

实现JQuery 的插件可以让静态页面也能用 COOKIE哈哈，不错把下面是具体的使用方法: 1.首先是必须的JQuery 包：jquery-1.3.1.js 和其COOKIE 插件：jquery.cookie.js 2.第一步在HTML 页面中蓝色紫色

jk_3699的专栏 1181

Jquery Cookie切换皮肤

最近在学习Jquery，发现Jquery真的是非常强大，短短几行代码就能实现切换皮肤的功能。 1）素材下载 2）关键代码 $(function () { $('#skin>li').click(function () { var skinID = t

czh4869623的专栏 1214

网页切换CSS实现换肤，并缓存到浏览器

引入两个CSS文件 <link href="${base}/theme/classic/dist/css/default.css" rel="stylesheet" type="text/css" title="default"/> <link href="${base}/theme/classic/dist/css/tumblr_style.css" rel="alternate stylesheet" type="text/css" title="tumblr"/> 用JS来实

小明君 556

jquery学习笔记切换皮肤

// $(function(){ var $li =$("#skin li"); $li.click(function(){ switchSkin( this.id ); }); var cookie_skin = $.cookie( "MyC

fendou4533的专栏 677

上一篇： csdn博客换行markdown换行

下一篇： vscode快捷键大全

使用jQuery实现动态切换网页皮肤

CyberJolt的博客

10-03

193