给网页换皮肤的效果

1、在页面中写入下面代码：html(由于效果简单所以代码也很少) ：<ul>

   <li id="gray" class="select"></li>
   <li id="red"></li>
    <li id="blue"></li>
    <li id="yellow"></li>
    <li id="green"></li>
    <li id="black"></li>
  </ul>

2、在上面代码的下面写入下面代码具体如下:

<style>ul{margin:0;padding:0;width:200px;height:28px;border:1px solid #fff;list-style:none;}

ul li{margin:4px 0 0 10px;width:20px;height:20px;border-radius:3px;float:left;}
.select{position:relative;width:20px;height:20px;background-image:url("../images/select.png");z-index:20;}
ul li#gray{background-color:gray;}
ul li#red{background-color:red;}
ul li#blue{background-color:blue;}
ul li#yellow{background-color:yellow;}
ul li#green{background-color:green;}
ul li#black{background-color:black;}

</style>

3、在页面最底部写入下面代码

<script type="text/javascript">

 $("ul li").click(function(){
  $(this).addClass("select").siblings("li").removeClass("select");
  $(".color").attr("href","../css/"+this.id+".css"); });
</script>

4、来看看最终效果吧

这个呢，是切换背景颜色的，下午做个切换背景图片的，哈哈，期待吧