<!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> |
初级程序员
by: 云代码会员 发表于:2015-10-15 16:33:36 顶(0) | 踩(0) 回复
是不是要够积分才可以下载呢?
回复评论