Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menulis tab dalam javascript

Bagaimana untuk menulis tab dalam javascript

PHPzasal: 2023-04-25 16:19:26810semak imbas

Dengan perkembangan Internet, antara muka tapak web menjadi lebih dan lebih keren, dan Tab telah menjadi salah satu elemen UI biasa dalam tapak web moden. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menulis tab untuk menjadikan tapak web anda lebih moden.

Struktur HTML

Pertama, kita perlu mencipta struktur tab dalam HTML, yang boleh dilakukan dengan kod berikut:

<div class="tab-container">
  <ul class="tab-nav">
    <li class="tab-nav-item active">Tab 1</li>
    <li class="tab-nav-item">Tab 2</li>
    <li class="tab-nav-item">Tab 3</li>
  </ul>
  <div class="tab-content active">Tab 1 content</div>
  <div class="tab-content">Tab 2 content</div>
  <div class="tab-content">Tab 3 content</div>
</div>

HTML di atas Struktur mengandungi bekas tab (bekas tab), yang mengandungi bar navigasi tab (nav tab) dan kandungan tab (kandungan tab). Dalam bar navigasi, setiap tab ialah item senarai (tab-nav-item), dan tab yang dipilih pada masa ini boleh ditunjukkan dengan menambah kelas "aktif". Dalam kandungan, anda juga boleh menunjukkan kandungan tab yang sedang dipilih dengan menambah kelas "aktif".

Gaya CSS

Seterusnya, kita perlu menambah gaya pada tab dan kandungan, yang boleh dilakukan dengan kod berikut:

.tab-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}

.tab-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eee;
  padding: 10px;
}

.tab-nav-item {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.tab-nav-item:hover {
  background: #fff;
}

.tab-nav-item.active {
  background: #fff;
  font-weight: bold;
}

.tab-content {
  padding: 20px;
  display: none;
}

.tab-content.active {
  display: block;
}

CSS di atas Gaya menetapkan lokasi, saiz, sempadan, bayang-bayang dan sifat lain bekas tab, serta gaya bar navigasi dan kandungan tab. Ambil perhatian bahawa sifat paparan kandungan tab ditetapkan kepada tiada, yang hanya akan dipaparkan apabila tab yang sepadan dipilih.

Kod JavaScript

Akhir sekali, kita perlu menulis kod JavaScript untuk menjadikan paparan togol tab pada klik. Anda boleh menggunakan kod berikut:

const tabs = document.querySelectorAll('.tab-nav-item');
const contents = document.querySelectorAll('.tab-content');

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener(&#39;click&#39;, function() {
    // 首先隐藏所有选项卡内容
    for (let j = 0; j < contents.length; j++) {
      contents[j].classList.remove(&#39;active&#39;);
    }
    // 设置当前选中的选项卡添加 "active" 类
    for (let j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove(&#39;active&#39;);
    }
    this.classList.add(&#39;active&#39;);
    contents[i].classList.add(&#39;active&#39;);
  });
}

Kod JavaScript di atas menggunakan pendengar acara untuk melaksanakan fungsi menukar kandungan tab yang sepadan apabila bar navigasi tab diklik. Pertama, sembunyikan semua kandungan tab, dan kemudian tetapkan tab yang dipilih pada masa ini dan kandungan yang sepadan untuk menambah kelas "aktif" untuk mencapai kesan memaparkan kandungan tab.

Kod lengkap

Akhir sekali, kami menggabungkan kod HTML, CSS dan JavaScript di atas untuk membentuk kod lengkap seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tab 选项卡</title>
  <style>
    .tab-container {
      display: flex;
      flex-direction: column;
      margin: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
    }

    .tab-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #eee;
      padding: 10px;
    }

    .tab-nav-item {
      cursor: pointer;
      padding: 10px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .tab-nav-item:hover {
      background: #fff;
    }

    .tab-nav-item.active {
      background: #fff;
      font-weight: bold;
    }

    .tab-content {
      padding: 20px;
      display: none;
    }

    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-container">
    <ul class="tab-nav">
      <li class="tab-nav-item active">Tab 1</li>
      <li class="tab-nav-item">Tab 2</li>
      <li class="tab-nav-item">Tab 3</li>
    </ul>
    <div class="tab-content active">Tab 1 content</div>
    <div class="tab-content">Tab 2 content</div>
    <div class="tab-content">Tab 3 content</div>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-nav-item');
    const contents = document.querySelectorAll('.tab-content');

    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener(&#39;click&#39;, function() {
        // 首先隐藏所有选项卡内容
        for (let j = 0; j < contents.length; j++) {
          contents[j].classList.remove(&#39;active&#39;);
        }
        // 设置当前选中的选项卡添加 "active" 类
        for (let j = 0; j < tabs.length; j++) {
          tabs[j].classList.remove(&#39;active&#39;);
        }
        this.classList.add(&#39;active&#39;);
        contents[i].classList.add(&#39;active&#39;);
      });
    }
  </script>
</body>
</html>

Sekarang , anda boleh melaksanakan sendiri tab Tab dengan menyalin-menampal kod di atas untuk menjadikan tapak web anda lebih moden.

Atas ialah kandungan terperinci Bagaimana untuk menulis tab dalam javascript. 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

Artikel sebelumnya：Bagaimana untuk menukar teks ke json menggunakan javascriptArtikel seterusnya：Bagaimana untuk menukar teks ke json menggunakan javascript

Artikel berkaitan

Lihat lagi