web网页换肤

自从web2.0开始流行之后，很多网站更加注重用户自定义，例如在网页上用户可以自定义新闻，热议拖动网页内容，也可以给网页选择一套自己喜欢的内容

其实他的实现原理就是点击颜色按钮调用不同的样式文件来实现不同匹夫之间的切换，并且将换好的皮肤放在cookie中，这样用户下次访问的时候就可以显示自己自定义的肤色

代码实现：

<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 id="div_side_0"><div id="news"><h1 class="title">时事新闻</h1></div><div id="div_side_0"><div id="news"><h1 class="title">娱乐新闻</h1></div></div>

然后根据HTML代码预定义几套换肤用的样式（设计代码的时候使用一些小技巧，就是将皮肤选择按钮<li>元素的ＩＤ与网页样式的样式文件名设置为一样的，这样就可以简单化操作）

<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile">

然后初始化网页按钮
最后为皮肤选择按钮添加单击事件有下面两个步骤
1、当皮肤选择按钮被单击之后，此按钮就被勾选
2、将网页进行换肤

var li =$("#skin li");//li.click(function(){     $("#"+this.id).addClass("selected")//当前li元素被选中     .siblings.remove("selected");//去掉其他的同辈的li元素     //这已不是最重要的一部     $("#cssfile").attr("href","css/"+this.id+".css");//设置不同的皮肤});//此时当用户点击不同的皮肤  页面就会显示不同的皮肤样式，但是当用户刷新或者是关闭浏览器的时候，皮肤又会被初始化。隐刺需要将皮肤放在cookie中//引入jQuery的cookie插件<script srd="js/jQuery.cookie.js" type="text/javaScript"></script>var li =$("#skin li");//li.click(function(){     $("#"+this.id).addClass("selected")//当前li元素被选中     .siblings.remove("selected");//去掉其他的同辈的li元素     //这已不是最重要的一部     $("#cssfile").attr("href","css/"+this.id+".css");//设置不同的皮肤      $.cookie("myCookie",this.id.{path:'/',expres:10})//计入cookie});//上面已经将cookie进行了保存，var cookie_skin = $.cookie("myCookie");//如果存在就返回TRUE反之则为FALSEif(cookie){     $("#"+this.id).addClass("selected")//当前li元素被选中     .siblings.remove("selected");//去掉其他的同辈的li元素     //这已不是最重要的一部     $("#cssfile").attr("href","css/"+this.id+".css");//设置不同的皮肤      $.cookie("myCookie",this.id.{path:'/',expres:10})//计入cookie});}

此时网页不仅能正常的跟换皮肤 而且还被保存在cookie中，当页面刷新之后还是当前选择的颜色