Bagaimana untuk membuka tab kategori css

Tab kategori CSS boleh memaparkan kandungan kategori, yang boleh dicapai dengan mengikuti langkah berikut: Buat bekas HTML yang mengandungi butang dan kandungan tab, dan tetapkan atribut IDnya untuk menggunakan JavaScript; dengar klik butang tab Peristiwa yang menyembunyikan semua kandungan tab dan memaparkan kandungan tab yang sepadan dengan butang yang diklik.

Cara membuka tab kategori CSS

Tab kategori CSS ialah cara untuk menyusun dan memaparkan kandungan, yang membolehkan pengguna bertukar antara kategori kandungan yang berbeza dengan mengklik pada tab. Untuk membuka tab kategori CSS, anda perlu mengikuti langkah berikut:

Struktur HTML

1. Cipta elemen bekas dalam HTML yang mengandungi bar tab dan kandungan tab.
2. Buat elemen <button> atau <a> untuk setiap tab dan tetapkan atribut idnya. <button> 或 <a> 元素，并设置其 id 属性。
3. 为每个选项卡内容创建一个 <div> 元素，并设置其 id
Buat elemen <div> untuk setiap kandungan tab dan tetapkan atribut idnya.

Berikut ialah contoh struktur HTML:

<code class="html"><div class="tabs">
  <button id="tab1">选项卡 1</button>
  <button id="tab2">选项卡 2</button>

  <div id="content1">内容 1</div>
  <div id="content2">内容 2</div>
</div></code>

Gaya CSS

1. Tetapkan gaya bar tab, termasuk warna latar belakang, saiz fon dan penjajaran.
2. Tetapkan gaya butang tab, termasuk gaya keadaan tidak aktif dan aktif.
3. Tetapkan gaya untuk kandungan tab, termasuk warna latar belakang, padding dan jidar.

Berikut ialah contoh gaya CSS:

<code class="css">.tabs {
  display: flex;
  background-color: #f1f1f1;
  padding: 10px;
}

.tabs button {
  padding: 10px 20px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

.tabs button.active {
  background-color: #f1f1f1;
}

.tabs div {
  display: none;
  padding: 20px;
}

.tabs div.active {
  display: block;
}</code>

Pengendalian Acara JavaScript

1. Gunakan JavaScript untuk mendengar acara klik pada butang tab.
2. Sembunyikan semua kandungan tab apabila pengguna mengklik butang.
3. Menunjukkan kandungan tab yang sepadan dengan butang yang diklik.

Berikut ialah contoh pengendali acara JavaScript: 🎜

<code class="javascript">const tabs = document.querySelector('.tabs');

tabs.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const tabId = e.target.id;
    const contentId = tabId.replace('tab', 'content');

    const buttons = tabs.querySelectorAll('button');
    buttons.forEach(btn => btn.classList.remove('active'));

    e.target.classList.add('active');

    const contents = tabs.querySelectorAll('div');
    contents.forEach(content => content.classList.remove('active'));

    const content = tabs.querySelector(`#${contentId}`);
    content.classList.add('active');
  }
});</code>

Atas ialah kandungan terperinci Bagaimana untuk membuka tab kategori css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!