jqueryは動的divを非表示および表示します-フロントエンドQ&A-php.cn

jqueryは動的divを非表示および表示します

May 18, 2023 pm 08:50 PM

jQuery は、Web 開発用の豊富なツールと機能を提供する、高速、簡潔、強力な Javascript ライブラリです。 Web 開発では、jQuery を使用して Web サイトをより美しく、使いやすくするためのさまざまな効果を実現できます。その中でも動的 div 要素の非表示と表示は共通の要件であり、この記事ではこれを実現するための jQuery の使用方法を紹介します。

動的 div 要素の非表示と表示は、実際には要素の CSS プロパティを変更します。具体的には、div 要素を非表示にする場合は、その要素が表示されないように、display 属性を none に設定する必要があります。div 要素を表示する場合は、display 属性を block またはその他の値に設定して、要素が表示されるようにする必要があります。再表示されます。

jQuery を使用すると、次の 2 つのメソッドを使用して動的 div 要素を表示および非表示にすることができます。

hide() メソッドと show() メソッドを使用する

jQuery の Hide() メソッドと show() メソッドを使用するのが最も簡単で直接的な方法です。これら 2 つのメソッドは、要素の CSS プロパティを設定せずに、要素を直接非表示にしたり表示したりできます。

以下は、hide() メソッドと show() メソッドを使用したコード例です。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;jQuery Hide and Show Demo&lt;/title&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button id=&quot;hide-btn&quot;&gt;Hide&lt;/button&gt;
    &lt;button id=&quot;show-btn&quot;&gt;Show&lt;/button&gt;
    &lt;div class=&quot;dynamic-div&quot;&gt;This is a dynamic div element.&lt;/div&gt;
    &lt;script&gt;
        $(document).ready(function() {
            $(&quot;#hide-btn&quot;).click(function() {
                $(&quot;.dynamic-div&quot;).hide();
            });
            $(&quot;#show-btn&quot;).click(function() {
                $(&quot;.dynamic-div&quot;).show();
            });
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記のコードでは、クラス Dynamic-div で div 要素を定義し、それを設定します。属性は none に設定されます。これは、要素がデフォルトで非表示になることを意味します。次に、要素をそれぞれ非表示および表示するための Hide() メソッドと show() メソッドを使用して、2 つのボタンがページに追加されます。「非表示」ボタンをクリックすると要素が非表示になり、「表示」ボタンをクリックすると要素が再表示されます。

css() メソッドを使用する

hide() メソッドと show() メソッドを使用することに加えて、css() メソッドを使用して動的 div 要素の CSS 属性。具体的には、css() メソッドを使用して表示属性を変更し、要素の非表示と表示の効果を実現できます。

以下は css() メソッドを使用したコード例です:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;jQuery Hide and Show Demo&lt;/title&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button id=&quot;hide-btn&quot;&gt;Hide&lt;/button&gt;
    &lt;button id=&quot;show-btn&quot;&gt;Show&lt;/button&gt;
    &lt;div class=&quot;dynamic-div&quot;&gt;This is a dynamic div element.&lt;/div&gt;
    &lt;script&gt;
        $(document).ready(function() {
            $(&quot;#hide-btn&quot;).click(function() {
                $(&quot;.dynamic-div&quot;).css(&quot;display&quot;, &quot;none&quot;);
            });
            $(&quot;#show-btn&quot;).click(function() {
                $(&quot;.dynamic-div&quot;).css(&quot;display&quot;, &quot;block&quot;);
            });
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

上記のコードでは、css() メソッドを使用して .dynamic-div 要素の表示属性を変更します。、これにより、要素の非表示と表示の効果が実現されます。「非表示」ボタンをクリックすると要素が非表示になり、「表示」ボタンをクリックすると要素が再表示されます。

概要

jQuery を使用して動的 div 要素を表示または非表示にするのは非常に簡単です。 Hide() メソッドと show() メソッドを使用して要素を直接非表示および表示することも、 css() メソッドを使用して要素の表示属性を変更して、非表示と表示の効果を実現することもできます。ページ内に複数の動的 div 要素がある場合、クラスまたは ID を使用して、非表示または表示する必要がある要素を指定する必要があることに注意してください。

以上がjqueryは動的divを非表示および表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。