butang javascript tunjukkan sorok-Soal Jawab bahagian hadapan-php.cn

butang javascript tunjukkan sorok

PHPz

Lepaskan： 2023-05-12 11:23:06

asal

6149 orang telah melayarinya

Dengan perkembangan teknologi Internet yang berterusan, Javascript (selepas ini dirujuk sebagai JS) telah menjadi teknologi yang meluas. Oleh kerana ekspresif, fleksibiliti dan ciri-ciri lain, JS bukan lagi aksesori kepada pembangunan laman web, tetapi telah menjadi teras interaksi halaman web dan kesan dinamik. Artikel ini akan memperkenalkan operasi asas JS: cara memaparkan/menyembunyikan kandungan dengan mengklik butang.

1. Sintaks asas

Sebelum memperkenalkan cara untuk menunjukkan dan menyembunyikan butang, kita perlu memahami beberapa pengetahuan sintaks asas JS. Dalam fail HTML halaman web, kami boleh membenamkan kod JS ke dalam halaman web melalui teg <script> untuk mengawal elemen halaman web. Berikut ialah format umum untuk membenamkan JS dalam dokumen HTML:

<html>
  <head>
    <script>
      JS代码内容
    </script>
  </head>
  <body>
    HTML文档正文
  </body>
</html>

Salin selepas log masuk

Dalam JS, kami biasanya menggunakan fungsi document.getElementById() untuk mendapatkan elemen halaman web. Fungsi ini akan memperoleh elemen HTML yang sepadan berdasarkan nilai atribut id dan mengembalikan objek elemen tersebut. Contohnya:

<button id="btn">点击我</button>
<script>
  var btn = document.getElementById("btn");
</script>

Salin selepas log masuk

Kod di atas boleh mendapatkan elemen butang dengan id "btn" dan kemudian menyerahkannya kepada pembolehubah btn. Seterusnya, kita boleh menggunakan JS untuk mengawal paparan/sembunyi butang.

2. Klik butang untuk menunjukkan/menyembunyikan

1 Kawal paparan/menyembunyikan butang

Dalam JS, kita boleh menggunakan atribut display CSS. gaya untuk mengawal elemen Tunjukkan atau sembunyikan. Apabila nilai atribut display ialah none, elemen akan disembunyikan; apabila nilai atribut display ialah block, elemen akan dipaparkan.

Oleh itu, kita hanya perlu mencipta butang dan mengikat acara kliknya Dalam acara klik, tetapkan atribut display elemen terkawal kepada none atau block untuk memaparkan elemen. bersembunyi.

Berikut ialah kaedah pelaksanaan mudah:

<button onclick="toggle()">点击我</button>
<div id="content" style="display:none;">需要显示/隐藏的内容</div>
<script>
  function toggle() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>

Salin selepas log masuk

Dalam kod di atas, kami mencipta butang dan mengikat fungsi onclick dalam acara toggle()nya, yang menggunakan Digunakan untuk mengawal elemen yang perlu ditunjukkan/disembunyikan. Dalam fungsi ini, kita memperoleh elemen document.getElementById() melalui fungsi id="content" dan menetapkannya kepada pembolehubah content. Seterusnya, kami menentukan sama ada nilai atribut display bagi elemen ialah none Jika ya, tetapkan kepada block jika tidak, tetapkan kepada none.

2. Kawal paparan/sembunyikan berbilang elemen

Kaedah di atas hanya boleh mengawal paparan/sembunyikan satu elemen Jika anda perlu mengawal berbilang elemen, anda perlu membuat yang sepadan pengubahsuaian. Kita boleh merangkum elemen yang perlu dikawal dalam elemen induk yang sama, merentasi dalam acara onclick elemen induk, dan kemudian mengawal paparan/sembunyikan elemen anaknya melalui atribut style.display elemen tersebut.

Berikut ialah kaedah pelaksanaan:

<button onclick="toggle()">点击我</button>
<div id="wrapper">
  <div class="content" style="display:none;">需要显示/隐藏的内容 1</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 2</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 3</div>
</div>
<script>
  function toggle() {
    var wrapper = document.getElementById("wrapper");
    var contents = wrapper.getElementsByClassName("content");
    for (var i = 0; i < contents.length; i++) {
      var content = contents[i];
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  }
</script>

Salin selepas log masuk

Dalam kod di atas, kami merangkum tiga elemen yang perlu dikawal dalam elemen induk id="wrapper". Apabila peristiwa klik dicetuskan, fungsi toggle() akan memperoleh objek elemen induk wrapper dahulu, dan kemudian memperoleh semua elemen wrapper.getElementsByClassName() melalui kaedah class="content" dan menyimpannya dalam tatasusunan contents. Seterusnya, kami menggunakan for untuk menggelungkan semua elemen dalam tatasusunan dan menentukan sama ada nilai atribut displaynya ialah none, dan kemudian menetapkannya kepada block atau none.

3. Ringkasan

Artikel ini memperkenalkan operasi JS asas: klik butang untuk menunjukkan/menyembunyikan kandungan elemen. Melalui pengenalan beberapa sintaks JS dan demonstrasi kaedah pelaksanaan tertentu, saya percaya bahawa semua orang boleh menguasai kemahiran ini dengan lebih baik. Perlu diingatkan bahawa JS perlu ditulis dengan berhati-hati Terutama apabila merujuk objek DOM, pastikan untuk memastikan objek telah dimuatkan untuk mengelakkan ralat yang tidak dijangka.

Atas ialah kandungan terperinci butang javascript tunjukkan sorok. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!