码迷,mamicode.com
首页 > Web开发 > 详细

作品第一课----网页换肤

时间:2015-12-23 22:41:36      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页换肤</title>
    <style type="text/css">
    body, html { height: 100%; }
    body { margin:0; }
    li { list-style: none;width: 10px; height: 10px; border: 3px solid; float: left; border-radius: 50%; margin-left: 10px; }
    div { overflow: hidden; }
    .choice_one { border-color: #75E6D5; }
    .choice_two { border-color: #7063A9; }
    .choice_three { border-color: #CCC41E; }
    
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
        <ul>
            <li class="choice_one"></li>
            <li class="choice_two"></li>
            <li class="choice_three"></li>
        </ul>
    </div>
    
    <script>
    $(document).ready(function(){
        $(".choice_one").on("click", function(){
            $(".choice_three").css({"background-color": "#CCC41E", "border-color": "#CCC41E"});
            $(".choice_two").css({"background-color": "#7063A9", "border-color": "#7063A9"});
            $(this).css({"background-color": "#DDD", "border-color":"#000"});
            $(‘body‘).css("background-color", "#75E6D5");
        });

        $(".choice_two").on("click", function(){
            $(".choice_one").css({"background-color": "#75E6D5", "border-color": "#75E6D5"});
            $(".choice_three").css({"background-color": "#CCC41E","border-color": "#CCC41E"});
            $(this).css({"background-color": "#DDD", "border-color":"#000"});
            $(‘body‘).css("background-color", "#7063A9");
        });

        $(".choice_three").on("click", function(){
            $(".choice_one").css({"background-color": "#75E6D5", "border-color": "#75E6D5"});
            $(".choice_two").css({"background-color": "#7063A9", "border-color": "#7063A9"});
            $(this).css({"background-color": "#DDD", "border-color":"#000"});
            $(‘body‘).css("background-color", "#CCC41E");
        });
    })

    


    </script>
</body>
</html>

 

作品第一课----网页换肤

标签:

原文地址:http://www.cnblogs.com/samtrybest/p/5071438.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!