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

display不是属性，它是style属性/对象的属性。但是jQuery有自己的show，hide和toggle方法，所以你可以简单地使用它：

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

Answer 2

你真的应该有一个名为page的css类和另一个名为page-invisible的页面。那你就做了

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

类页面 - 不可见只是{display：none}，或者它可以是{opacity：.3; z-index：0}等让它有点“落后”另一个（你必须设置位置绝对等以将div放在彼此的顶部。

单击按钮时显示不同的div

2 个答案: