网页换肤

html

<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>

css

/*切换皮肤样式*/
#skin { 
    float:right; 
    margin:10px; 
    padding:4px; 
    width:120px; 
    list-style:none; 
    border: 1px solid #CCCCCC; 
    background:#FFF;
}
#skin li { 
    float:left; 
    margin-right:4px; 
    width:15px; 
    height:15px; 
    text-indent:-9999px; 
    overflow:hidden; 
    display:block; 
    cursor:pointer; 
    background-image:url(../images/theme.gif); 
}
#skin_0 { background-position:0px 0px; }
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1.selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

雪碧图

直接上js

引用了一个jquery.cookie.js
//网站换肤
$(function(){
    var  $li=$("#skin li");
    $li.click(function(){
        switchSkin(this.id);
    })
    var cookie_skin = $.cookie("MyCssSkin");
    if (cookie_skin) {
        switchSkin( cookie_skin );
    }
})
function switchSkin(skinName){
    $("#"+skinName).addClass('selected').siblings().removeClass('selected');
    $("#cssfile").attr("href","styles/skin/"+skinName+".css");
    $.cookie("MyCssSkin",skinName,{path:'',expires:10});
}

 

 

 

 

 

 

 

 

 

来源：锋利的jquery