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