网页换肤

 

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

html代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <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" />

    <script src="JS/jquery-1.3.2.js" type="text/javascript"></script>

    <script src="JS/jquery.cookie.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            var $li = $("#skin li");
            $li.click(function() {
                switchSkin(this.id)
            });
            //获取cookie存入的值
            var cookie_skin = $.cookie("MyCssSkin");
            //如果cookie存在
            if (cookie_skin) {
                switchSkin(cookie_skin);
            }
        });
        function switchSkin(skinName) {
            //添加li选中的样式
            $("#" + skinName).addClass("selected")
            //去掉其它同辈的<li>元素的选中
            .siblings().removeClass("selected");
            $("#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>


 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值