Heim > Artikel > Web-Frontend > 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
<button>
- oder <a>
-Element und legen Sie dessen id
-Attribut fest. <button>
或 <a>
元素,并设置其 id
属性。<div>
元素,并设置其 id
<div>
-Element für jeden Tab-Inhalt und legen Sie dessen id
-Attribut fest. <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>CSS-Stile
<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>JavaScript-Ereignisbehandlung
<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>
Das obige ist der detaillierte Inhalt vonSo öffnen Sie die Registerkarte „CSS-Kategorie“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!