如何更改我的網站背景點擊按鈕？

我得到了一個窗簾類型的網站，前後窗簾和前窗簾。當我點擊家中的按鈕並關於我們時，我的連續後簾圖像應該會改變。請幫我解決這個問題。到目前爲止我的代碼是在這裏如下：如何更改我的網站背景點擊按鈕？

<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

如何更改我的網站背景點擊按鈕？

回答

相關問題