1

了解しました。2つのボタンがあります。私の目標は、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 に答える