单击按钮时显示不同的div

Question

我正在尝试完成在底部有两个按钮的页面。点击这些按钮中的每一个都会带来不同的内容。 例如：

<div id="page1">...some content...</div> 
<div id="page2">...some content...</div> 

我的CSS：

#page1 { display: block;} 
#page2 { display: none;} 

并且按钮图像：

<div id="button1"><img src="images/button1.png"/></div> 
<div id="button2"><img src="images/button2.png"/></div> 

我使用JavaScript来使按钮正常工作。 #block是被点击的按钮后移动的对象：

<script language="javascript"> 
    $(document).ready(function() { 
     $("#button1").click(function() { 
      $("#block").animate({ 
       left: "10px" 
      }); 
      $("#page1").attr("display", "block"); 
      $("#page2").attr("display", "none"); 
     }); 
     $("#button2").click(function() { 
      $("#block").animate({ 
       left: "100px" 
      }); 
      $("#page1").attr("display", "none"); 
      $("#page2").attr("display", "block"); 
     }); 
    }); 
</script> 

所以当#button1点：
#page1将改为display:block;
#page2将改为display:none; - 隐藏

当#button2是点击：
#page1将更改为display:none; - 隐藏
#page2将改为display:block;
这意味着它会显示在page2

Answer 1

你真的应该有一个css类名为页面和另一个叫做页面不可见。然后，你只是做

$('#page1').addClass("page-invisible"); 
$('#page2').removeClass("page-invisible"); 

类的页面不可见只为{显示：无}，也可以是这样的{不透明度：0.3; z-index：0}等等，让它有一种“背后”的另一种（你将不得不设置位置绝对等等把div放在彼此之上

Answer 2

display内容不是一个属性，它是style属性/对象的属性。但jQuery有其自身的显示，隐藏和切换方法，所以你可以简单地使用：

<script language="javascript"> 
$(document).ready(function() 
{ 
     $("#button1").click(function(){ 
      $("#block").animate({left:"10px"}); 
      $("#page1, #page2").toggle(); 
     }); 
     $("#button2").click(function(){ 
      $("#block").animate({left:"100px"}); 
      $("#page1, #page2").toggle(); 
     }); 
}); 
</script>