0

私は4つのHTMLdivを表示し、クリックして非表示にします。これを行う方法

            <div id="targetid" class="image_one"><img src="image/imageone.png"/></div>
            <div id ="targetidone "class="image_two"><img src="image/imagetwo.png"/></div>
            <div id="targetidtwo" class="image_one_one"><img src="image/pagetwo_graph_two_11.png"/></div>
            <div id ="targetidfour"class="image_two_two"><img src="image/pagetwo_graph_two_22.png"/></div>

以下はdiv、上の画像をクリックした後に非表示にして表示する必要がある2つです

          <div class="option_image"><img src="image/option_1.png"/></div>

          <div class="option_image_one"><img src="image/option_1.png"/></div>
4

4 に答える 4

4

サードパーティのJavaScript（jQueryなど）を使用しない場合は、次のように使用します。

document.getElementById('target-id').style.display = 'none'; // hide it
document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div)
document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span)

例（1）：

<div id="target-id">hello workd</div> <!-- attribute: id -->
<a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">hide it</a> 
<a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">show it</a>

例（2）：

<div id="targetid" class="image_one" onclick="document.getElementById('targetid').style.display = 'none';"><img src="image/imageone.png"/></div> <!-- adding onclick to hide this element when you click it -->

<div class="option_image" onclick="document.getElementById('targetid').style.display = 'block';"><img src="image/option_1.png"/></div> <!-- adding onclick to show element #targetid when you click this -->
于 2012-04-19T06:42:57.373 に答える
3 
$("buttonid").click(function () {
$("divid").toggle();
});

Buttonid-dividをクリックするボタンのID-表示/非表示にする必要のあるdivのID

注：jqueryスクリプトを含める

于 2012-04-19T06:41:05.553 に答える
0

muhhamad alvinが投稿したように、表示方法を逆にすることをお勧めします。したがって、彼のソリューションを微調整すると、次の結果が得られました。

それはどのように機能しますか？

-[質問]をクリックして回答を表示し、[回答]をクリックして回答を非表示にします（質問は常に表示されます）。したがって、質問と回答を独自のdivに置き換えるだけです。

    <a href="#" onclick="document.getElementById('target-id').style.display = 'block'; return false;">Question</a>
<div id="target-id" style="display: none;"><a href="#" onclick="document.getElementById('target-id').style.display = 'none'; return false;">Answer</a> </div> <!-- attribute: id -->

編集：注意すべきことは、質問と回答のペアごとに、異なる「target-id」が必要になるということです。

于 2014-10-23T18:45:22.407 に答える
-1

あなたはこれを試すことができます：

$（ "。image_one"）。toggle（）;

上記のコードは、クラスの名前で要素を取得します。そこにクラスがない場合は、次のようにidで取得できます。

$（ "＃image_one"）。toggle（）;

これがお役に立てば幸いです

于 2012-04-19T06:57:04.550 に答える