1

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

<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
#page1display:none;
#page2display:block;
page2

4

2 回答 2

3

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>
于 2013-10-22T23:06:02.227 回答
1

你真的应该有一个名为 page 的 CSS 类和另一个名为 page-invisible 的 CSS 类。然后你就做

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

类 page-invisible 只是 {display:none}，或者它可以是 {opacity:.3; z-index:0} 等让它在另一个“后面”（你必须设置绝对位置等以将 div 放在彼此之上。

于 2013-10-22T23:07:13.980 回答