Cara Menukar Kandungan Div dengan JavaScript
JavaScript menyediakan pelbagai cara untuk memanipulasi elemen pada halaman web, termasuk keupayaan untuk menukar kandungan div. Mari kita tunjukkan cara ini boleh dicapai menggunakan kod JavaScript mudah.
Pertimbangkan kod HTML berikut:
<code class="html"><html> <head> <script type="text/javascript"> function changeDivContent() { // ... } </script> </head> <body> <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()"> <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()"> <div id="content"></div> </body> </html></code>
Dalam kod ini, kami mempunyai dua butang radio (A dan B) dan satu div dengan id "kandungan." Matlamatnya adalah untuk menukar kandungan div "kandungan" apabila salah satu butang radio dipilih.
Untuk mencapai ini, kita boleh menggunakan sifat HTML dalaman bagi elemen kandungan. Begini caranya:
<code class="javascript">document.getElementById("content").innerHTML = "whatever";</code>
Apabila anda memilih butang radio "A" atau "B", fungsi changeDivContent() dipanggil. Dalam fungsi ini, anda boleh menetapkan sifat HTML dalaman bagi elemen kandungan kepada teks yang dikehendaki. Contohnya:
<code class="javascript">function changeDivContent() { if (document.getElementById("radiobuttonA").checked) { document.getElementById("content").innerHTML = "Content for A"; } else if (document.getElementById("radiobuttonB").checked) { document.getElementById("content").innerHTML = "Content for B"; } }</code>
Kod ini menyemak butang radio mana yang dipilih dan menukar kandungan div "kandungan" dengan sewajarnya. Anda boleh menyesuaikan nilai innerHTML dengan teks yang anda mahu paparkan. Teknik ini membolehkan anda menukar kandungan div secara dinamik berdasarkan interaksi pengguna, mencipta lebih banyak halaman web interaktif.
Atas ialah kandungan terperinci Bagaimanakah saya boleh menukar kandungan div secara dinamik menggunakan JavaScript berdasarkan interaksi pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!