jquery.cookie.js切换网页皮肤保存到Cookie实例   多皮肤  刷新保存缩略图

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>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注