tab pelaksanaan css

CSS melaksanakan gaya Tab

Gaya tab ialah reka bentuk interaktif yang sangat biasa dalam pembangunan web Ia memaparkan berbilang kawasan kandungan dalam bentuk halaman tab Pengguna menukar kawasan paparan dengan mengklik pada tab sangat Meningkatkan kebolehgunaan halaman web. Dalam artikel ini, kami akan menunjukkan kepada anda cara melaksanakan gaya Tab mudah menggunakan CSS.

Pertama, kita perlu mentakrifkan struktur HTML Struktur khusus adalah seperti berikut:

<div class="tab">
  <div class="tab-header">
    <button class="tab-button active">Tab 1</button>
    <button class="tab-button">Tab 2</button>
    <button class="tab-button">Tab 3</button>
  </div>
  <div class="tab-content active">
    <p>这里是 Tab 1 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 2 的内容</p>
  </div>
  <div class="tab-content">
    <p>这里是 Tab 3 的内容</p>
  </div>
</div>

Dalam struktur di atas, kami menggunakan elemen div sebagai bekas, yang mengandungi dua sub-elemen. , iaitu pengepala tab dan kandungan tab. Pengepala tab menggunakan elemen butang untuk mewakili setiap tab dan kandungan tab dibalut menggunakan elemen div. Antaranya, setiap kandungan tab dan tab dikaitkan dengan nama kelas active, yang digunakan untuk mewakili tab yang dipilih pada masa ini.

Seterusnya, kami mula menggunakan CSS untuk menentukan gaya. Mula-mula, kita perlu mengalih keluar gaya lalai elemen butang:

button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

Dalam gaya di atas, kami mengalih keluar latar belakang, jidar, garis besar dan padding elemen butang untuk menjadikannya kelihatan seperti pautan teks biasa. Dan tetapkan gaya penuding tetikus kepada bentuk tangan untuk menjadikannya kelihatan seperti butang yang boleh diklik.

Seterusnya, kami menetapkan gaya .tab-header untuk mencapai warna latar belakang dan status pengaktifan tab:

.tab-header {
  display: flex;
}

.tab-button {
  background-color: #f4f4f4;
}

.tab-button:hover {
  background-color: #ddd;
}

.tab-button.active {
  background-color: #ddd;
}

Dalam gaya di atas, kami menggunakan susun atur Flexbox untuk membuat susunan mendatar tab . Kemudian, kami mentakrifkan warna latar belakang .tab-button dan warna latar belakang keadaan tuding. Akhir sekali, kami menggunakan nama kelas .active untuk mewakili tab yang sedang aktif, dan kami menetapkan warna latar belakangnya kepada sama dengan keadaan tuding supaya keadaan aktif tab dipaparkan secara langsung apabila halaman dimuatkan.

Kini kita hanya perlu mentakrifkan nama kelas untuk setiap tab dan menambah nama kelas aktif pada tab pertama. Contohnya:

<button class="tab-button active tab-1">Tab 1</button>
<button class="tab-button tab-2">Tab 2</button>
<button class="tab-button tab-3">Tab 3</button>

Dalam struktur di atas, kami telah menambah nama kelas tab-1, tab-2, tab-3 untuk setiap tab. Nama kelas ini akan digunakan untuk menentukan gaya CSS untuk tab masing-masing.

Seterusnya, kami menetapkan gaya .tab-content untuk menunjukkan dan menyembunyikan kandungan tab:

.tab-content:not(.active) {
  display: none;
}

Dalam gaya di atas, kami menggunakan pemilih :not(.active) untuk dipadankan kecuali kandungan Tab di luar keadaan aktif. Kami menetapkan atribut display mereka kepada none supaya ia disembunyikan pada halaman.

Akhir sekali, kami menggunakan peristiwa mengikat JavaScript untuk melaksanakan fungsi menukar kandungan dengan mengklik pada tab:

const tabs = document.querySelectorAll('.tab-button')

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 隐藏所有选项卡内容
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active')
    })
    // 显示当前选项卡内容
    const activeTab = tab.classList[1]
    document.querySelector(`.${activeTab}`).classList.add('active')
    // 切换选项卡的激活状态
    tabs.forEach(tab => {
      tab.classList.remove('active')
    })
    tab.classList.add('active')
  })
})

Dalam kod di atas, kami menggunakan kaedah querySelectorAll() untuk memilih semua kandungan tab elemen , dan gelung melalui tab apabila ia diklik, mengalih keluar semua nama kelas active mereka. Kemudian, kami menggunakan atribut classList untuk mendapatkan elemen kandungan yang sepadan dengan tab semasa dan menambah nama kelas active untuk memaparkan kandungan tab. Akhir sekali, kami mengalih keluar keadaan pengaktifan semua tab dan menambah nama kelas active pada tab semasa untuk menjadikannya aktif. Dengan cara ini, kami telah berjaya melaksanakan gaya Tab yang mudah.

Ringkasan:

Dalam artikel ini, kami menggunakan CSS dan JavaScript untuk melaksanakan gaya Tab yang mudah. Kami mula-mula menentukan struktur HTML dan kemudian menggunakan CSS untuk menentukan warna latar belakang tab, keadaan tuding dan keadaan pengaktifan. Akhir sekali, kami menggunakan JavaScript untuk melaksanakan fungsi menukar kandungan dengan mengklik pada tab. Pelaksanaan gaya ini mudah, mudah difahami dan diubah suai serta sesuai untuk kebanyakan projek pembangunan web.

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