Rumah >hujung hadapan web >tutorial css >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
<button>
atau <a>
untuk setiap tab dan tetapkan atribut id
nya. <button>
或 <a>
元素,并设置其 id
属性。<div>
元素,并设置其 id
<div>
untuk setiap kandungan tab dan tetapkan atribut id
nya. <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
<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
<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!