javascript - 单击按钮时显示不同的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; - hidden

当 #button2 被点击时:
#page1 将更改为 display:none; - hidden
#page2 将更改为 display:block;
这意味着它将显示 page2

上的内容

Answer 1

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>