更换网站皮肤就这么简单

Posted 再美的梦。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了更换网站皮肤就这么简单相关的知识,希望对你有一定的参考价值。

<!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>

这个方法目前是我使用的简单粗暴的一种 当然有更多简单易懂的方法欢迎来探讨~

以上是关于更换网站皮肤就这么简单的主要内容,如果未能解决你的问题,请参考以下文章

如何更换DevExpress控件皮肤

苹果手机新浪微博怎么更换皮肤

Inno Setup 如何使用皮肤插件更换软件安装包界面和外框包装?望详细解答!

Inno Setup 如何使用皮肤插件更换软件安装包界面和外框包装?望详细解答!

js实现换肤效果

怎样给 VS 更换皮肤