jQuery页面换肤（cookie 传值）

HTML代码：

<div id="header"> <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>  <div id="navigation"></div> <div id="global_module"> <h3></h3> <h3></h3> </div>

CSS样式：

//skin_0 #header{ background:#3B5998; } #navigation { background:#3B5998; } .global_module h3 { background:#3B5998; } //skin_1 #header{  background:#BB3BD9; } #navigation {  background:#BB3BD9; } .global_module h3 {  background:#BB3BD9; } //skin_2 #header{  background:#E31559; } #navigation {  background:#E31559; } .global_module h3 {  background:#E31559; } //skin_3 #header{  background:#08BECE; } #navigation {  background:#08BECE; } .global_module h3 {  background:#08BECE; } //skin_4 #header{  background:#FBA60A; } #navigation {  background:#FBA60A; } .global_module h3 {  background:#FBA60A;  } //skin_5 #header{  background:#AFD400; } #navigation {  background:#AFD400; } .global_module h3 {  background:#AFD400; }

jQuery代码：

<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" /> <script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { //点击事件 $("#header #skin li").click(function () { skin(this.id); }); //获取设置的cookie名 var cookie_skin = $.cookie("MySkin"); if (cookie_skin) { skin(cookie_skin); } }); function skin(skinid) { //先根据获取的id添加class再移除class $("#" + skinid).addClass("selected").siblings().removeClass("selected"); //根据id选择link改变它的href属性以达到换肤 $("#cssfile").attr("href", "styles/skin/" + skinid + ".css"); //设置cookie $.cookie('MySkin', skinid, { expires: 7, path: '/' }); }</script>