Bagaimana untuk melaksanakan kesan penukaran bar menu dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk melaksanakan kesan penukaran bar menu dalam JavaScript?

PHPz

Lepaskan： 2023-10-18 09:45:42

asal

1637 orang telah melayarinya

JavaScript 如何实现菜单栏的切换效果？

Bagaimana untuk mencapai kesan penukaran bar menu dengan JavaScript?

Dalam pembangunan web, kesan pensuisan bar menu adalah fungsi yang sangat biasa. Melalui JavaScript, kami dapat merealisasikan kesan pensuisan bar menu, membolehkan pengguna bertukar antara menu yang berbeza dan memaparkan kandungan yang sepadan. Seterusnya, saya akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan pensuisan bar menu melalui contoh kod tertentu.

Pertama, kita perlu menentukan struktur bar menu dalam HTML. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <style>
    .menu-section {
      display: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#" class="menu-link" onclick="toggleMenu(0)">菜单 1</a></li>
      <li><a href="#" class="menu-link" onclick="toggleMenu(1)">菜单 2</a></li>
      <li><a href="#" class="menu-link" onclick="toggleMenu(2)">菜单 3</a></li>
    </ul>
  </nav>

  <div class="menu-section" id="menu-section-1">
    菜单 1 内容
  </div>

  <div class="menu-section" id="menu-section-2">
    菜单 2 内容
  </div>

  <div class="menu-section" id="menu-section-3">
    菜单 3 内容
  </div>

  <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami telah mencipta bar menu dengan tiga menu. Setiap menu sepadan dengan kawasan kandungan Dalam keadaan awal, kami menetapkan sifat paparan CSS kandungan menu kepada tiada, yang bermaksud kandungan menu tersembunyi. Seterusnya, kami melaksanakan kesan pensuisan dalam JavaScript.

Dalam fail script.js yang baru dibuat, kami menulis kod JavaScript berikut:

function toggleMenu(menuIndex) {
  // 隐藏所有菜单内容
  let menus = document.getElementsByClassName('menu-section');
  for (let i = 0; i < menus.length; i++) {
    menus[i].style.display = 'none';
  }

  // 显示选定的菜单内容
  let selectedMenu = document.getElementById('menu-section-' + (menuIndex + 1));
  selectedMenu.style.display = 'block';
}

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mendapatkan kandungan menu yang dipilih dengan memanggil getElementsByClassName 获取到所有菜单内容，然后将所有菜单内容的 display 属性设置为 none，即隐藏所有内容。之后，我们通过 getElementById dan menetapkan atribut paparannya untuk menyekat, iaitu paparan kandungan menu.

Pada ketika ini, kami telah melengkapkan kod JavaScript untuk melaksanakan kesan penukaran bar menu. Apabila pengguna mengklik pada pautan menu, kandungan menu yang sepadan akan dipaparkan, dan kandungan menu lain akan disembunyikan.

Melalui contoh kod di atas, kita dapat melihat bahawa JavaScript boleh mencapai kesan penukaran bar menu dengan mudah. Kesan interaktif sedemikian boleh meningkatkan pengalaman pengguna dan membolehkan pengguna menyemak imbas dan bertukar antara kandungan yang berbeza dengan lebih mudah. Pada masa yang sama, kami juga boleh menyesuaikan gaya dan kesan interaktif mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan penukaran bar menu dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!