1

好的，所以我有两个按钮。我的目标是制作页面，以便当单击一个按钮时，它将显示一个段落，当单击另一个按钮时，它将关闭另一个选项卡并显示另一个段落。我认为这将非常简单，但是事实证明，在单击另一个选项卡时关闭一个选项卡是很困难的。

function btn1Event(){
    var text1 = document.getElementById("btn1Text");
    var text2 = document.getElementById("btn2Text");

    if(text2.style.display == "inline" || text1.style.display == "none"){
        text1.style.display = "inline";
    }
}

function btn2Event(){
    var text1 = document.getElementById("btn1Text");
    var text2 = document.getElementById("btn2Text");

    if(text1.style.display == "inline" || text2.style.display == "none"){
        text2.style.display = "inline";
    }
}

不完全确定为什么这不起作用。任何帮助表示赞赏！

4

2 回答 2

1

如果可以的话，这是使用 jQuery 的解决方案：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>

<input type=button id="btn1" value="Show Div1">
<input type=button id="btn2" value="Show Div2">

<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn1").click(function() {
            $("#btn1Text").show();
            $("#btn2Text").hide();
        });
        $("#btn2").click(function() {
            $("#btn1Text").hide();
            $("#btn2Text").show();
        });
    });
</script>

而非 jQuery 方法：

<input type=button id="btn1" value="Show Div1" onclick="btn1Event();">
<input type=button id="btn2" value="Show Div2" onclick="btn2Event();">

<div style="display: none;" id="btn1Text">Test Div</div>
<div style="display: none;" id="btn2Text">Test Div2</div>

<script type="text/javascript">

function btn1Event(){
    document.getElementById("btn1Text").style.display = "inline";
    document.getElementById("btn2Text").style.display = "none";
}

function btn2Event(){
    document.getElementById("btn1Text").style.display = "none";
    document.getElementById("btn2Text").style.display = "inline";
}

</script>
于 2013-01-04T03:14:48.097 回答
0

您所做的只是将文本框显示设置为内联。如果您从未在任何时候将显示设置为无，您如何期望隐藏任何选项卡。

function btn1Event(){
    document.getElementById("btn1Text").style.display = "inline";
    document.getElementById("btn2Text").style.display = "none";
}

function btn2Event(){
    document.getElementById("btn1Text").style.display = "none";
    document.getElementById("btn2Text").style.display = "inline";
}
于 2013-01-04T03:04:45.493 回答