很简单的JQuery网页换肤

现在介绍网页换肤的例子已经数不胜数，自己也没有仔细研究过，刚搞遇到类似这个问题，网上查了资料解决了问题，感觉很有用，就记录了下来和大家分享一下。效果很简单，我就直接讲怎么使用的。

其中用到了jquery.cookie.js

首先是html代码：

    <div id="header_demo">  
        <a id="logo" href="#">Rainweb</a>  
            <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>  

CSS代码：

    /*头部样式开始*/  
    #header_demo{  
        700px;   
        height:80px;   
        border: 1px solid #AAAAAA;  
        margin:10px auto;   
        /** background:#3B5998; **/  
    }  
    /*logo样式开始*/  
    #logo {   
        float:left;   
        margin:0 0 0 10px;   
        color:#FFF;   
        font-size:3em;   
        font-weight:700;  
        line-height:80px;  
    }  
    /*切换皮肤样式*/  
    #skin {   
        float:rightright;   
        margin:10px;   
        padding:4px;   
        120px;   
        list-style:none;   
        border: 1px solid #CCCCCC;   
        background:#FFF;  
    }  
    #skin li {   
        float:left;   
        margin-right:4px;   
        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; }  

javascript代码：

    //网站换肤  
    $(function () {  
        var $li = $("#skin li");  //查找到元素  
        $li.click(function () {   //给元素添加事件  
            switchSkin(this.id);//调用函数  
        });  
        //保存Cookie完毕以后就可以通过Cookie来获取当前的皮肤了  
        var cookie_skin = $.cookie("MyCssSkin");     //获取Cookie的值  
        if (cookie_skin) {                          //如果确实存在Cookie  
            switchSkin(cookie_skin);     //执行  
        }  
    });  
    function switchSkin(skinName) {     
        $("#" + skinName).addClass("selected")                //当前<li>元素选中  
                           .siblings().removeClass("selected");  //去掉其他同辈<li>元素的选中  
        $("#cssfile").attr("href", "css/skin/" + skinName + ".css"); //设置不同皮肤  
        $.cookie("MyCssSkin", skinName, { path: ‘/’, expires: 10 });  //保存Cookie  
        alert(skinName);  
    }  

最后就是一个link文件：

<link id="cssfile" type="text/css" href="css/skin/skin_5.css" rel="Stylesheet"> 

演示地址    下载地址