jquery - 如何在单击按钮时更改我的网站背景？

Question

我有一个窗帘式网站，前后窗帘和前窗帘。当我在主页和关于我们上单击我的按钮时，我连续的后幕图像应该改变。请帮我解决这个问题。到目前为止，我的代码如下:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script src="jquery.easing.1.3.js" type="text/javascript"></script>  

    <script type="text/javascript">
        $(document).ready(function() {

            $curtainopen = false;

            $(".hrope").click(function(){

                $(this).blur();
                if ($curtainopen == false){ 
                    $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'60px'},2000 );
                    $curtainopen = true;


                }else{
                    $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                    $curtainopen = false;

                }
                return false;

            });

        }); 
        $(document).ready(function() {

            $curtainopen = false;

            $(".arope").click(function(){
                $(this).blur();
                if ($curtainopen == false){ 
                    $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'60px'},2000 );
                    $curtainopen = true;
                }else{
                    $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                    $curtainopen = false;
                }
                return false;

            });

        }); 
        $(document).ready(function() {

            $curtainopen = false;

            $(".crope").click(function(){
                $(this).blur();
                if ($curtainopen == false){ 
                    $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'60px'},2000 );

                    $curtainopen = true;

                }else{
                    $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                    $curtainopen = false;

                }
                return false;

            });

        });

    </script>

    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{  
    text-align: center;
    background: #4f3722 url('images/darkcurtain.jpg') repeat-x;
    background: #4f3722 url('images/home.png') repeat-x;;
            }
        .div{           
            background-image:url('images/home.png') repeat-x;
        }


        img{
            border: none;
        }
        .leftcurtain{
            width: 50%;
            height: 495px;
            top: 0px;
            left: 0px;
            position: absolute;
            z-index: 2;
        }
         .rightcurtain{
            width: 51%;
            height: 495px;
            right: 0px;
            top: 0px;
            position: absolute;
            z-index: 3;
        }
        .rightcurtain img, .leftcurtain img{
            width: 100%;
            height: 100%;
        }
        .logo{
            margin: 0px auto;
            margin-top: 150px;
        }
        .hrope{
            position:absolute;
            top:5px;

            left: 70%;
            z-index:4;
        }
        .arope{
            position: absolute;
            top:5px;

            left: 80%;
            z-index:4;

        }
        .crope{
            position: absolute;
            top:5px;

            left: 90%;
            z-index:4;
        }



    </style>

</head>

<body>
    <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div>
    <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div>
    <img class="logo" src="images/buildinter.jpg"; />
    <a class="hrope" href="#">
        <img src="images/hrope.png"/>

    </a>
    <a class="arope" href="#">
        <img src="images/arope.png"/>
    </a>
    <a class="crope" href="#">
        <img src="images/crope.png"/>
    </a>

</body>

Answer 1

在 http://jsfiddle.net/michaeljimmy/3TdQL/1/ 上的 jsfiddle 上试试这个

<html>
<head>
    <title>Change</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <style type="text/css">

        #changeme {
            width: 200px;
            height: 200px;
        }
        .red {
            background: red;
        }
        .blue {
            background: blue;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function() {
                $('#changeme').toggleClass('red blue');
            });
        });
    </script>
</head>
<body>
    <div id="changeme" class="red"></div>
    <a id="button" href="#">Change Background Color</a>
</body>