JQuery网页换肤

先是html代码：

XML/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 { width: 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: 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; }

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文件：

XML/HTML代码

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

来源于： http://www.cnblogs.com/leejersey/archive/2011/12/15/2289350.html

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/420

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！