2

2 つのボタンと、異なる情報を含む 2 つの非表示の div があります。1 つのボタンがクリックされたときにコンテンツを表示する方法を考え出そうとしています (私はこれをうまく機能させることができました)。その後、別のボタンをクリックすると、古い div が再び非表示になり、新しい div が開きます。

基本的に：

コンテンツAはこちら！Bコンテンツはこちら！

ユーザーがコンテンツ A をクリックすると、コンテンツ A が表示されます。ユーザーがもう一度コンテンツ A をクリックすると、コンテンツ A が消えます。

ユーザーがコンテンツ B をクリックすると、コンテンツ B が表示されます。

ユーザーが切り替えることもできます。たとえば、コンテンツ A の div を開き、コンテンツ B のボタンをクリックすると、コンテンツ B が読み込まれますが、コンテンツ A は自動的に閉じます。

私が使用しているJSは次のとおりです。

function ShowDiv() {
document.getElementById("myDiv").style.display = "";
}

function ShowDiv2() {
    document.getElementById("myDiv2").style.display = "";
    }

HTML

<input type="button" name="answer" onclick="ShowDiv()" />
<input type="button" name="answer2" onclick="ShowDiv2()" />

<div id="myDiv" style="display: none;">Hi I'm content a!</div>
<div id="myDiv2" style="display: none;">Hi I'm content B!</div>

現時点では、両方のボタンでコンテンツが正しく表示されますが、もう一方をクリックしようとしても何も起こりません。

4

2 に答える 2

4

トグル機能が必要な場合は、表示を "" から "none" に変更し、元に戻すだけです。

function ShowDiv() {
    document.getElementById("myDiv").style.display = "";
    document.getElementById("myDiv2").style.display = "none";
}

function ShowDiv2() {
    document.getElementById("myDiv2").style.display = "";
    document.getElementById("myDiv").style.display = "none";
}

jqueryライブラリの使用を強くお勧めしますが、これはトグル機能です。

于 2012-08-17T14:14:01.837 に答える
0

割り当ててみる*.style.display = "none";

于 2012-08-17T14:13:47.847 に答える