如何更改我的网站背景点击按钮？

我得到了一个窗帘类型的网站，前后窗帘和前窗帘。当我点击家中的按钮并关于我们时，我的连续后帘图像应该会改变。请帮我解决这个问题。到目前为止我的代码是在这里如下：如何更改我的网站背景点击按钮？

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

来源

2012-03-16 Muthu Kumaran V

TL试试这个上的jsfiddle;博士，请发表您的具体问题和具体的部分，你认为你需要帮助 – 2012-03-16 03:40:18

我想改变我的背景按钮点击（不是按钮的背景）... – 2012-03-16 03:45:39

在http://jsfiddle.net/michaeljimmy/3TdQL/1/

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

来源

2012-03-16 08:03:28

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

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

</script>

来源

2012-03-16 08:27:38

如何更改我的网站背景点击按钮？

回答

相关问题