Heim >Web-Frontend >CSS-Tutorial >So öffnen Sie die Registerkarte „CSS-Kategorie'.

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

下次还敢
下次还敢Original
2024-04-25 18:03:18311Durchsuche

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 die Registerkarte „CSS-Kategorie'.

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 <button>- oder <a>-Element und legen Sie dessen id-Attribut fest. <button><a> 元素,并设置其 id 属性。
  3. 为每个选项卡内容创建一个 <div> 元素,并设置其 id
  4. Erstellen Sie ein <div>-Element für jeden Tab-Inhalt und legen Sie dessen id-Attribut fest.

Hier ist eine Beispiel-HTML-Struktur:

<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
  1. Legen Sie den Stil der Tab-Leiste fest, einschließlich Hintergrundfarbe, Schriftgröße und Ausrichtung.
  2. Legen Sie den Stil der Tab-Schaltfläche fest, einschließlich des Stils des inaktiven und aktiven Status.
  3. Legen Sie Stile für den Tab-Inhalt fest, einschließlich Hintergrundfarbe, Abstand und Ränder.

Hier ist ein Beispiel für einen CSS-Stil:

<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
  1. Verwenden Sie JavaScript, um auf Klickereignisse auf Tab-Schaltflächen zu warten.
  2. Alle Tab-Inhalte ausblenden, wenn der Benutzer auf die Schaltfläche klickt.
  3. Zeigt den Inhalt der Registerkarte an, die der angeklickten Schaltfläche entspricht.

Das Folgende ist ein Beispiel für die 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn