jquery实现切换皮肤

最新推荐文章于 2023-10-03 19:59:30 发布

原创

最新推荐文章于 2023-10-03 19:59:30 发布 · 1k 阅读

标签

#jquery #前端

收录于

本文介绍了如何使用jQuery和jQuery-cookie库实现皮肤切换功能，避免引入所有样式文件，而是通过改变CSS链接的ID来加载对应样式。详细步骤包括设置默认样式、添加换肤按钮ID、实现换肤函数以及更换图标的方法，特别是对于图标颜色和类型的动态调整。

这是帮其他组实现的一个小功能，这边记录一下给做同样功能的一个参考好了。
代码地址：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