ボタンを使用して Div の表示を動的に切り替えるにはどうすればよいですか?-jsチュートリアル-php.cn

ボタンを使用して Div の表示を動的に切り替えるにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-02 17:33:29

オリジナル

594 人が閲覧しました

How to Toggle Div Visibility Dynamically with a Button?

ボタンを使用して Div の表示/非表示を動的に切り替える

ボタンのクリックで div 要素の表示/非表示をシームレスに切り替えたいですか?これを実現する方法は次のとおりです:

純粋な JavaScript:

次の HTML 構造を考えてみましょう:

<code class="html"><div id="newpost"></div></code>

ログイン後にコピー

純粋な JavaScript を使用して表示/非表示を切り替えるには、以下を使用できます:

<code class="js">var button = document.getElementById('button');

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};</code>

ログイン後にコピー

jQuery:

jQuery のシンプルさにより、以下を使用できます:

<code class="js">$("#button").click(function() { 
    $("#newpost").toggle();
});</code>

ログイン後にコピー

どちらのソリューションでも切り替えが可能ですID「button」のボタンがクリックされたときの「newpost」div要素の可視性。 div 要素は、ボタンをクリックするたびに「非表示」状態と「表示」状態の間で切り替わります。

以上がボタンを使用して Div の表示を動的に切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。