用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

用 jquery.cookie 实现网页换皮肤 换主题

2013-03-20 作者: 小蜜锋举报

[javascript]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
	<link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
    <!--   引入jQuery -->
	<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
	<!--   引入jQuery的cookie插件 -->
	<script src="js/jquery.cookie.js" type="text/javascript"></script>
	<script type="text/javascript">
		//<![CDATA[
		$(function(){
			var $li =$("#skin li");
			$li.click(function(){
				switchSkin( this.id );
			});
			var cookie_skin = $.cookie( "MyCssSkin");
			if (cookie_skin) {
				switchSkin( cookie_skin );
			}
		});
		function switchSkin(skinName){
				 $("#"+skinName).addClass("selected")                 //当前<li>元素选中
							  .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
				$("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤
				$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
		}
		//]]>
	</script>
</head>
<body>
    <ul id="skin">
		<li id="skin_0" title="灰色" class="selected">灰色</li>
		<li id="skin_1" title="紫色">紫色</li>
		<li id="skin_2" title="红色">红色</li>
		<li id="skin_3" title="天蓝色">天蓝色</li>
		<li id="skin_4" title="橙色">橙色</li>
		<li id="skin_5" title="淡绿色">淡绿色</li>
	</ul>

    <div id="div_side_0">
		<div id="news">
		    <h1 class="title">时事新闻</h1>
		</div>
    </div>

    <div id="div_side_1">
		<div id="game">
			<h1 class="title">娱乐新闻</h1>
		</div>
    </div>
    
</body>
</html>

[代码运行效果截图]


用 jquery.cookie 实现网页换皮肤 换主题

[源代码打包下载]




网友评论    (发表评论)

共3 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...