Bagaimana untuk melaksanakan fungsi paparan butang kandungan berbeza dalam javascript

JavaScript ialah bahasa pengaturcaraan bahagian hadapan yang biasa digunakan dalam pembangunan laman web Salah satu fungsi yang biasa adalah untuk memaparkan kandungan yang berbeza apabila butang diklik. Dalam artikel ini, kita akan belajar cara menggunakan JavaScript untuk mencapai fungsi ini.

Pertama, kita perlu menentukan butang dan mengikat acara klik padanya. Ini boleh dilakukan dengan menambahkan kod berikut dalam fail HTML:

<button onclick="showContent()">显示内容</button>

Dalam butang ini, kami menambah atribut onclick padanya dan menetapkannya kepada fungsi showContent(). Fungsi ini akan dipanggil apabila butang ini diklik.

Seterusnya, kita perlu menulis fungsi showContent() untuk mencapai kesan memaparkan kandungan yang berbeza apabila butang diklik. Kita boleh mencapai ini dengan mencipta elemen HTML dan mengubah suai kandungannya. Untuk memastikan struktur kod jelas, kita boleh menentukan elemen HTML ini dalam <div> atau elemen bekas lain. Kodnya adalah seperti berikut:

<div id="content"></div>

Menggunakan JavaScript, anda boleh mendapatkan elemen dan mengubah suai kandungannya untuk memaparkan kandungan yang berbeza apabila butang diklik. Di bawah ialah kod contoh ringkas yang akan memaparkan kandungan "Hello!" dan "Dunia!"

function showContent() {
  var content = document.getElementById("content");
  if (content.innerHTML === "Hello!") {
    content.innerHTML = "World!";
  } else {
    content.innerHTML = "Hello!";
  }
}

Dalam kod ini, kita mula-mula mendapatkan elemen document.getElementById("content") melalui <div> dan menyimpannya dalam pembolehubah content. Kami kemudian menyemak sama ada kandungan elemen ialah "Hello!". Jika ya, kami mengubah suai kandungannya kepada "Dunia!", jika tidak, kami mengubah suai kandungannya kepada "Hello!".

Dengan kod di atas, kita dapat merealisasikan fungsi memaparkan kandungan berbeza secara bergilir-gilir apabila butang diklik.

Selain itu, kami juga boleh menggunakan elemen HTML lain untuk mencapai kesan yang berbeza. Sebagai contoh, kita boleh memasukkan kandungan yang berbeza dalam elemen <input> dan memaparkannya apabila butang diklik. Kod sampel adalah seperti berikut:

<button onclick="showContent()">显示内容</button>

function showContent() {
  var content = document.getElementById("content").value;
  alert(content);
}

Dalam contoh ini, kita mula-mula mentakrifkan elemen <input> dan menambah atribut id padanya, supaya kita boleh mendapatkan kandungan elemen secara langsung. Apabila butang diklik, kami menggunakan fungsi alert() untuk memaparkan nilai elemen untuk mencapai kesan memaparkan kandungan yang berbeza.

Butang JavaScript untuk memaparkan kandungan berbeza ialah keperluan pembangunan bahagian hadapan yang biasa. Melalui contoh dalam artikel ini, saya berharap dapat membantu pembaca mempelajari cara menggunakan JavaScript untuk melaksanakan fungsi ini, dan juga memahami aplikasi JavaScript dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi paparan butang kandungan berbeza dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!