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>

Answer 2

...
<body>
 <div id="body">
  <a id="Change" href=#>ChangeBackground</a>
 </div>
</body>

<script>
 $("Change").click(function () {
  $("#body").css("background-color","red")
 });

</script>

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

2 个答案: