Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Togol Keterlihatan Div Secara Dinamik dengan Butang?

Bagaimana untuk Togol Keterlihatan Div Secara Dinamik dengan Butang?

Barbara Streisand
Barbara Streisandasal
2024-11-02 17:33:29561semak imbas

How to Toggle Div Visibility Dynamically with a Button?

Menogol Keterlihatan Div Secara Dinamik dengan Butang

Ingin menogol keterlihatan elemen div secara lancar dengan klik butang? Begini cara untuk mencapainya:

JavaScript Tulen:

Pertimbangkan struktur HTML berikut:

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

Untuk menogol keterlihatan menggunakan JavaScript tulen, anda boleh menggunakan:

<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:

Dengan kesederhanaan jQuery, anda boleh menggunakan:

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

Kedua-dua penyelesaian membenarkan anda menogol keterlihatan elemen div "newpost" apabila butang dengan "butang" ID diklik. Elemen div bertukar antara keadaan "tersembunyi" dan "kelihatan" dengan setiap klik butang.

Atas ialah kandungan terperinci Bagaimana untuk Togol Keterlihatan Div Secara Dinamik dengan Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn