利用jq并且添加上cookie的网页换肤

浏览数：38 / 时间：2015年06月09日

<body>
        <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 id="div_side_0">
            <div id="news">
                <h1 class="title">时事新闻</h1>
            </div>
        </div>

        <div id="div_side_1">
            <div id="game">
                <h1 class="title">娱乐新闻</h1>
            </div>
        </div>

    </body>

default.css
*{
    margin:0px;
    padding:0px;
}
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#div_side_0,#div_side_1
{
    float:left;
    width:120px;
    height:450px;
    }
#skin
{
    margin:10px;
    padding:5px;
    width:210px;
    padding-right:0px;
    list-style:none;
    border: 1px solid #CCCCCC;
    overflow:hidden;
    }
#skin li{
    float:left;
    margin-right:5px;
    width:15px;
    height:15px;
    text-indent:-999px;
    overflow:hidden;
    display:block;
    cursor:pointer;
    background-image:url(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 !important;
}
#skin_1.selected{
    background-position:15px 15px !important;
}
#skin_2.selected{
    background-position:35px 15px !important;
}
#skin_3.selected{
    background-position:55px 15px !important;
}
#skin_4.selected{
    background-position:75px 15px !important;
}
#skin_5.selected{
    background-position:95px 15px !important;
}
.title
{
    cursor:pointer;}
h1{
   margin:10px;
   padding:10px 20px;
   width:60px;
   color:#ffffff;
   font-size:14px;
}
a:link {
    text-decoration: none;
    color: #333333;
}
a:visited {
    color: #333333;
    text-decoration: none;
}
a:hover {
    color: #000000;
    text-decoration: underline;
}



skin_0.css
h1{
   background:#999999;
}



skin_1.css
h1{
   background:#BB3BD9;
}


skin_2.css
h1{
   background:#E31559;
}


skin_3.css
h1{
   background:#08BECE;
}


skin_4.css
h1{
   background:#FBA60A;
}


skin_5.css
h1{
   background:#AFD400;
}

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
//cookie.js插件在前几篇博客里已经提到过，或者百度都可以查到。
<script type="text/javascript">
$(function(){
    $("#skin li").click(function(){
        $("#"+this.id).addClass("selected").siblings().removeClass("selected");//当前<li>元素被选中
        $("#cssfile").attr("href","css/"+(this.id)+".css");//设置不同皮肤
        $.cookie( "MyCssSkin" ,  this.id , { path: ‘/‘, expires: 10 });//计入cookie

    });
    var cookie_skin=$.cookie("MyCssSkin");
    if(cookie_skin){
        $("#"+cookie_skin).addClass("selected").siblings().removeClass("selected");
        $("#cssfile").attr("href","css/"+cookie_skin+".css");
        $.cookie( "MyCssSkin" ,  cookie_skin , { path: ‘/‘, expires: 10 });
    }
});
</script >