Registerkarte „CSS-Implementierung“.

CSS implementiert den Tab-Stil

Der Tab-Stil ist ein sehr verbreitetes interaktives Design in der Webentwicklung. Es zeigt mehrere Inhaltsbereiche in Form von Tabs an, und Benutzer wechseln die Anzeige, indem sie auf die Tabs klicken. Bereich, wodurch die Benutzerfreundlichkeit von Webseiten erheblich verbessert wird. In diesem Artikel zeigen wir Ihnen, wie Sie mit CSS einen einfachen Tab-Stil implementieren.

Zuerst müssen wir die HTML-Struktur definieren. Die spezifische Struktur ist wie folgt:

<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>

In der obigen Struktur verwenden wir das div-Element als Container. welches zwei Unterelemente enthält: den Tab-Header und den Tab-Inhalt. Der Tab-Header verwendet ein Button-Element, um jede Registerkarte darzustellen, und der Tab-Inhalt wird mithilfe eines div-Elements umbrochen. Darunter ist jede Registerkarte und jeder Registerkarteninhalt mit einem aktiven-Klassennamen verknüpft, der zur Darstellung der aktuell ausgewählten Registerkarte verwendet wird. active 类名，用于表示当前选择的选项卡。

接下来，我们开始使用 CSS 来定义样式。首先，我们需要去掉 button 元素的默认样式：

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

在上述样式中，我们去掉了 button 元素的背景、边框、轮廓和填充，让它看起来像一个纯文本链接。并且设置了鼠标指针的样式为手型，让它看起来更像一个可点击的按钮。

下一步，我们设置 .tab-header 的样式，来实现选项卡的背景色和激活状态：

.tab-header {
  display: flex;
}

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

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

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

在上述样式中，我们使用了 Flexbox 布局来使得选项卡水平排列。然后，我们定义了 .tab-button 的背景色和悬停状态的背景色。最后，我们使用类名 .active 来表示当前激活的选项卡，我们将它的背景色设置为和悬停状态相同，以便在页面加载时直接显示出选项卡的激活状态。

现在，我们只需要为每个选项卡定义一个类名，并将激活状态的类名添加到第一个选项卡中。例如：

<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>

在上述结构中，我们为每个选项卡分别添加了一个类名 tab-1、tab-2、tab-3。这些类名将用于为各自的选项卡定义 CSS 样式。

下一步，我们设置 .tab-content 的样式，来实现选项卡内容的显示和隐藏：

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

在上述样式中，我们使用了 :not(.active) 选择器来匹配除了激活状态之外的选项卡内容。我们设置它们的 display 属性为 none，以便让它们隐藏在页面上。

最后，我们使用 JavaScript 绑定事件，来实现点击选项卡切换内容的功能：

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

在上述代码中，我们使用了 querySelectorAll() 方法选择所有选项卡内容元素，并在点击选项卡时循环遍历它们，将它们的 active 类名全部移除。然后，我们使用 classList 属性获取当前选项卡对应的内容元素，并添加 active 类名，以便显示该选项卡内容。最后，我们将所有选项卡的激活状态移除，并为当前选项卡添加 active

Als nächstes beginnen wir mit der Verwendung von CSS zum Definieren von Stilen. Zuerst müssen wir den Standardstil des Schaltflächenelements entfernen:

rrreee

Im obigen Stil entfernen wir den Hintergrund, den Rahmen, die Umrisse und die Polsterung des Schaltflächenelements, damit es wie einfacher Text aussieht Link. Und stellen Sie den Mauszeigerstil auf eine Handform ein, damit er eher wie eine anklickbare Schaltfläche aussieht.

Als nächstes legen wir den Stil von .tab-header fest, um die Hintergrundfarbe und den Aktivierungsstatus des Tabs zu erkennen: #🎜🎜#rrreee#🎜🎜#Oben Im Stil verwenden wir das Flexbox-Layout, um die Registerkarten horizontal anzuordnen. Dann definieren wir die Hintergrundfarbe von .tab-button und die Hintergrundfarbe des Hover-Status. Schließlich verwenden wir den Klassennamen .active, um den aktuell aktiven Tab darzustellen, und wir stellen seine Hintergrundfarbe auf die gleiche wie der Hover-Status ein, sodass der aktive Status des Tabs beim Öffnen der Seite direkt angezeigt wird Lasten. #🎜🎜##🎜🎜#Jetzt müssen wir nur noch einen Klassennamen für jede Registerkarte definieren und den Namen der aktiven Klasse zur ersten Registerkarte hinzufügen. Zum Beispiel: #🎜🎜#rrreee#🎜🎜#In der obigen Struktur haben wir einen Klassennamen tab-1, tab-2, tab-3 hinzugefügt . Diese Klassennamen werden verwendet, um CSS-Stile für die jeweiligen Registerkarten zu definieren. #🎜🎜##🎜🎜# Als nächstes legen wir den Stil von .tab-content fest, um den Tab-Inhalt anzuzeigen und auszublenden: #🎜🎜#rrreee#🎜🎜#Im obigen Stil haben wir verwendet den :not(.active)-Selektor, der mit dem Inhalt der Registerkarte mit Ausnahme des aktiven Status übereinstimmt. Wir setzen ihr display-Attribut auf none, damit sie auf der Seite ausgeblendet werden. #🎜🎜##🎜🎜#Schließlich verwenden wir JavaScript, um Ereignisse zu binden, um die Funktion des Klickens auf die Registerkarte zum Wechseln des Inhalts zu implementieren: #🎜🎜#rrreee#🎜🎜#Im obigen Code verwenden wir querySelectorAll() Die -Methode wählt alle Tab-Inhaltselemente aus und durchläuft sie, wenn auf die Registerkarte geklickt wird, wobei alle ihre aktiven-Klassennamen entfernt werden. Dann verwenden wir das Attribut classList, um das Inhaltselement abzurufen, das der aktuellen Registerkarte entspricht, und fügen den Klassennamen aktiv hinzu, um den Inhalt der Registerkarte anzuzeigen. Schließlich entfernen wir den Aktivierungsstatus aller Registerkarten und fügen den Klassennamen aktiv zur aktuellen Registerkarte hinzu, um sie aktiv zu machen. Auf diese Weise haben wir erfolgreich einen einfachen Tab-Stil implementiert. #🎜🎜##🎜🎜#Zusammenfassung: #🎜🎜##🎜🎜#In diesem Artikel haben wir CSS und JavaScript verwendet, um einen einfachen Tab-Stil zu implementieren. Wir haben zuerst die HTML-Struktur definiert und dann mithilfe von CSS die Hintergrundfarbe, den Hover-Status und den Aktivierungsstatus der Registerkarte definiert. Schließlich implementieren wir mithilfe von JavaScript die Funktion zum Wechseln von Inhalten durch Klicken auf die Registerkarte. Die Implementierung dieses Stils ist einfach, leicht zu verstehen und zu ändern und für die meisten Webentwicklungsprojekte geeignet. #🎜🎜#

Das obige ist der detaillierte Inhalt vonRegisterkarte „CSS-Implementierung“.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!