<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>jquery实现页面皮肤切换并保存</title>
<link title="green" rel="stylesheet" href="css/skin_0.css" id="cssfile">
<link title="blue" rel="stylesheet" href="css/skin_1.css" >
<link title="red" rel="stylesheet" href="css/skin_2.css">
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<style>
.head{width:400px;}
a{
display:inline-block;
width:20px;
height:20px;
cursor:pointer;
}
a.skin_0{
background:red;
}
a.skin_1{
background:green;
}
a.skin_2{
background:orange;
}
.content{
width:500px;
height:500px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="head">
<a class="skin_0" id="skin_0" class="selected"></a>
<a class="skin_1" id="skin_1"></a>
<a class="skin_2" id="skin_2"></a>
</div>
<div class="content">
</div>
</body>
<script>
function changeColor(skinName){
$("#"+skinName).addClass('selected').siblings().removeClass('selected');
$("#cssfile").attr('href','css/'+skinName+'.css');
$.cookie('mySkin',skinName,{path:'/',expires:10});
}
$(function(){
var $a = $(".head a");
$a.click(function(){
var skinName= this.id;
changeColor(skinName);
})
var cookieSkin = $.cookie('mySkin');
if(cookieSkin){
changeColor(cookieSkin);
}
})
</script>
</html>
这个方法目前是我使用的简单粗暴的一种 当然有更多简单易懂的方法欢迎来探讨~
