js需要引入两个,顺序不要反
<link rel="stylesheet" id="cssfile" href="css/dark.css" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
div布局,iconfont 图标切换
<div class="uc-icon">
<a href="javascript:void(0);" class="iconfont icon-skin icon-light"></a>
</div>
js实现切换
<script type="text/javascript">
$(function() {
$('.icon-skin').click(function() {
var skinname = "dark";
if($(this).hasClass("icon-light")){
$(this).removeClass("icon-light").addClass("icon-dark")
skinname = "light"
}else{
$(this).removeClass("icon-dark").addClass("icon-light")
skinname = "dark"
}
switchSkin(skinname)
});
var cookie_skin = $.cookie('MyCssSkin');
if (cookie_skin) {
switchSkin(cookie_skin);
if (cookie_skin == "light") {
$(".icon-skin").removeClass("icon-light").addClass("icon-dark")
} else{
$(".icon-skin").removeClass("icon-dark").addClass("icon-light")
}
}
});
function switchSkin(skinName) {
$('#cssfile').attr('href', 'css/' + skinName + '.css');
$.cookie('MyCssSkin',skinName,{path:'/',expires:10});
}
</script>