jquery修改頁面皮膚顏色

第一：html佈局

<div id="header">
	<a id="logo" href="#">Jane Shopping</a>
	<ul id="skin">
		<li id="skin_0" title="藍色" class="selected">藍色</li>
		<li id="skin_1" title="紫色" class="selected">紫色</li>
		<li id="skin_2" title="紅色" class="selected">紅色</li>
		<li id="skin_3" title="天藍色" class="selected">天藍色</li>
		<li id="skin_4" title="橙色" class="selected">橙色</li>
		<li id="skin_5" title="淡綠色" class="selected">淡綠色</li>
	</ul>
</div>

點擊不同的顏色塊，導航欄的顏色可隨着改變

第二：css樣式

#header{
	width:1190px;
	height: 200px;
	border:1px solid #aaaaaa;
	margin:5px auto;
	background:#3b5998;
}
#logo{
	float:left;
	margin:0 0 0 10px;
	color:#fff;
	font-size:4em;
	font-weight:700;
	line-height:200px;
}
#skin{
	float:right;
	margin:20px;
	padding:4px;
	list-style:none;
	border:1px solid #cccccc;
	background:#fff;
}
#skin li{
	float:left;
	margin-left:3px;
	margin-right:5px;
	width:15px;
	height:15px;
	text-indent:-9999px;
	overflow:hidden;
	display:block;
	cursor:pointer;
	background:#0287CA;
}
#skin #skin_0{
	background-color:blue;
}
#skin #skin_1{
	background-color:#b431ff;
}
#skin #skin_2{
	background-color:red;
}
#skin #skin_3{
	background-color:#06d3ff;
}
#skin #skin_4{
	background-color:orange;
}
#skin #skin_5{
	background-color:#06ffd3;
}

第三：jquery文件，使用了cookie記住選擇的顏色，在重新刷新的時候依然爲上一次選擇的顏色

$(function(){
	$('#skin li').click(function(){
		$('#header').css('background-color',$(this).css('background
                 -color'));//如果要改變其他的模塊，直接把id=header換成其他模
                 塊的id則可。接下來的if判斷也別忘記添加語句。
                $.cookie('background',$(this).css('background-color'));
	});
	if($.cookie('background')){
		$('#header').css('background-color',$.cookie('background'));
	}
});

還有一點就是在頁面中添加jquery庫！

這樣就大概能做好一個簡單的效果了！

寫得不好的地方，請多指正！