js代码学习19---网页换皮肤

最新推荐文章于 2024-08-23 16:53:29 发布

vvvbird

最新推荐文章于 2024-08-23 16:53:29 发布

阅读量1.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/vvvbird/article/details/78157974

版权

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
    <!--   ����jQuery -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    <!--   ����jQuery��cookie��� -->
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(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")                 //��ǰ<li>Ԫ��ѡ��
                              .siblings().removeClass("selected");  //ȥ������ͬ��<li>Ԫ�ص�ѡ��
                $("#cssfile").attr("href","css/"+ skinName +".css"); //���ò�ͬƤ��
                $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
        }
        //]]>
    </script>
</head>
<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>
</html>

defulat.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;
}