给网页换皮肤的效果

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、

来看看最终效果吧

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