<head>
<title>Jquery更换背景色_
脚本学堂_http://www.jb200.com</title>
<style type="text/css">
body, p, ul
{
margin: 0;
padding: 0;
}
ul
{
float: right;
height: 40px;
margin-top: 20px;
margin-right: 20px;
}
ul li
{
list-style-type: none;
float: left;
width: 20px;
height: 20px;
margin-left: 10px;
cursor: pointer;
}
.skin
{
height: 40px;
position: fixed;
background: #fff;
border-bottom: solid 1px #cccc;
top: 0;
left: 0;
width: 100%;
}
.red
{
background: #F06;
}
/*红色*/
.black
{
background: #000;
}
/*黑色*/
.blue
{
background: #09F;
}
/*蓝色*/
.green
{
background: #093;
}
/*绿色*/
</style>
<script src="/jquery/1.7.2/jquery.min.js" type="text/
javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//为了安全 google chrome等浏览器禁止本地文件写Cookie
// 即file:///F:/Lord%20community/test/Untitled-2.html这样的以file开头的是不能写本地文件的
var cookieClass = getCookie('class'); //读取需要缓存的对象。
$("body").attr("class", cookieClass); //
$(".skin_list li").each(function () {
$(this).click(function () {
var className = $(this).attr("class"); //保存当前选择的类名
$("body").attr("class", className, 30); //把选中的类名给body
function SetCookie(name, value, day)//两个参数，一个是cookie的名子，一个是值
{
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + day * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
SetCookie("class", className, 30);
})
});
});
function getCookie(name)//取cookies函数
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>
</head>
<body>
<div class="skin">
<ul class="skin_list">
<li style="width: 100px; text-align: right;">在这里更换背景：</li><li class="red"></li>
<li class="black"></li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
</body>
