jQuery 实现多页面换肤
https://bbs.csdn.net/topics/391856515
换肤有很多种，这里使用选择皮肤时，jQuery动态加载css，并且保存到cookie中，以实现下一次登陆时，自动使用当前皮肤。
多页面换肤其实和单页面换肤差不多，只需要把换肤函数作为一个公共函数，每个页面调用。
具体步骤（看代码）：
简单做了两个页面index.html,base.html，以实现在其中一个切换皮肤后，另外一个页面也可以自动更换皮肤。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/style1.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<title>换肤效果</title>
</head>
<body>
<div class="wap">
<span>我是页面1</span>
<ul>
<li value="1">黄色</li>
<li value="2">绿色</li>
<li value="3">蓝色</li>
</ul>
</div>
<h2><a href="base.html">转到base.html</a></h2>
<script src="js/app.js"></script>
</body>
</html>
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<title>换肤效果</title>
</head>
<body>
<div class="wap">
<span>我是页面2</span>
<ul>
<li value="1">黄色</li>
<li value="2">绿色</li>
<li value="3">蓝色</li>
</ul>
<button>确定</button>
</div>
<h2><a href="index.html">转到index.html</a></h2>
<script src="js/app.js"></script>
</body>
</html>
这里只是实现功能，所以样式很简单，只设置背景颜色的更换
style1.css:
.wap{
width: 80%;
height: 400px;
margin: 20px auto;
yellow;
}
ul{
float: right;
}
ul li{
list-style: none;
}
ul li:hover{
gainsboro;
}
ul li .selected{
#e0e0e0;
}
style2.css:
.wap{
width: 80%;
height: 400px;
margin: 20px auto;
green;
}
ul{
float: right;
}
ul li{
list-style: none;
}
ul li:hover{
gainsboro;
}
ul li .selected{
#e0e0e0;
}
style3.css:
.wap{
width: 80%;
height: 400px;
margin: 20px auto;
blue;
}
ul{
float: right;
}
ul li{
list-style: none;
}
ul li:hover{
gainsboro;
}
ul li .selected{
#e0e0e0;
}
最主要就是js部分，由于功能比较简单，js比较少，我把所有的js都放在一个js文件了
app.js:
/*选择皮肤*/
+function(){
/*选择皮肤事件*/
$(".wap").find("ul").find("li").on('click', function () {
$(this).addClass("selected");/*给当前主题添加selected样式*/
$(this).siblings().removeClass("selected");
console.log("gjafsdsa");
change_theme($(this).val());//改变主题
});
console.log("aaa");
/*读取cookie*/
var change_theme_id = $.cookie("change_theme_id");
/*如果cookie 存在 则使用cookie保存的样式*/
if(change_theme_id){
change_theme(change_theme_id);
}
/* 改变皮肤函数 */
function change_theme(change_theme_id){
/*加载css*/
$("<link>").attr({rel:"stylesheet",
type:"text/css",
href:"css/style"+change_theme_id+".css"})
.appendTo("head");
/*保存到cookie中,保存100天*/
$.cookie("change_theme_id",change_theme_id,{expires:100});
}
}();
值得注意的是：
我是使用cookie记录选择设置的主题皮肤样式，但是当cookie到期或者清除了浏览器的COOKIE，亦或者换用其他浏览器浏览时，当前设置的主题就会失效。为了让用户永久保存选择的主题样式，必须将所选的主题与用户信息对应，并写入数据库，下次该用户登录就可以直接读取主题，当然，该方法应用在有用户权限范围的系统，如后台管理系统，个人中心等。
到了这里，多页面换肤也就完成了，喜欢的小伙伴赶快试试吧
