So öffnen Sie die Registerkarte „CSS-Kategorie'.

CSS-Kategorieregisterkarten können Kategorieinhalte anzeigen, indem Sie die folgenden Schritte ausführen: Erstellen Sie einen HTML-Container, der Registerkartenschaltflächen und Inhalte enthält, und legen Sie den CSS-Stil der Registerkarte und des Inhalts fest; Auf Tab-Schaltflächenklicks warten Ereignis, das den gesamten Tab-Inhalt ausblendet und den Tab-Inhalt anzeigt, der der angeklickten Schaltfläche entspricht.

So öffnen Sie CSS-Kategorieregisterkarten

CSS-Kategorieregisterkarten sind eine Möglichkeit, Inhalte zu organisieren und anzuzeigen, sodass Benutzer durch Klicken auf die Registerkarten zwischen verschiedenen Inhaltskategorien wechseln können. Um CSS-Kategorieregisterkarten zu öffnen, müssen Sie die folgenden Schritte ausführen:

HTML-Struktur

1. Erstellen Sie ein Containerelement in HTML, das die Registerkartenleiste und den Registerkarteninhalt enthält.
2. Erstellen Sie für jede Registerkarte ein- oder-Element und legen Sie dessenid-Attribut fest.或元素，并设置其id属性。
3. 为每个选项卡内容创建一个
   元素，并设置其id
Erstellen Sie ein
-Element für jeden Tab-Inhalt und legen Sie dessen id-Attribut fest.

 选项卡 1 选项卡 2 
内容 1
 
内容 2
 

.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; }

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'); } });