So schreiben Sie Tabs in Javascript-Front-End-Fragen und Antworten-php.cn

So schreiben Sie Tabs in Javascript

PHPz

Freigeben： 2023-04-25 16:44:08

Original

838 Leute haben es durchsucht

Mit der Entwicklung des Internets sind Website-Oberflächen immer cooler geworden und Tabs sind zu einem der häufigsten UI-Elemente moderner Websites geworden. In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript Tabs schreiben, um Ihre Website moderner zu gestalten.

HTML-Struktur

Zuerst müssen wir die Tab-Struktur in HTML erstellen. Sie können den folgenden Code verwenden:

<div class="tab-container">
  <ul class="tab-nav">
    <li class="tab-nav-item active">Tab 1</li>
    <li class="tab-nav-item">Tab 2</li>
    <li class="tab-nav-item">Tab 3</li>
  </ul>
  <div class="tab-content active">Tab 1 content</div>
  <div class="tab-content">Tab 2 content</div>
  <div class="tab-content">Tab 3 content</div>
</div>

Nach dem Login kopieren

Die obige HTML-Struktur enthält einen Tab-Container (Tab-Container), der eine Option für die Kartennavigation enthält Leiste (Tab-Navigation) und Tab-Inhalt (Tab-Inhalt). In einer Navigationsleiste ist jede Registerkarte ein Listenelement (tab-nav-item), und die aktuell ausgewählte Registerkarte kann durch Hinzufügen einer „aktiven“ Klasse angezeigt werden. Im Inhalt können Sie auch den Inhalt des aktuell ausgewählten Tabs angeben, indem Sie die Klasse „aktiv“ hinzufügen.

CSS-Stil

Als nächstes müssen wir Stile zu den Registerkarten und Inhalten hinzufügen. Sie können den folgenden Code verwenden:

.tab-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}

.tab-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eee;
  padding: 10px;
}

.tab-nav-item {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.tab-nav-item:hover {
  background: #fff;
}

.tab-nav-item.active {
  background: #fff;
  font-weight: bold;
}

.tab-content {
  padding: 20px;
  display: none;
}

.tab-content.active {
  display: block;
}

Nach dem Login kopieren

Der obige CSS-Stil legt die Position, Größe, den Rahmen, den Schatten und andere Eigenschaften der Registerkarte fest Container und Stile für Navigationsleisten- und Registerkarteninhalte. Beachten Sie, dass die Anzeigeeigenschaft des Registerkarteninhalts auf „Keine“ eingestellt ist, sodass diese nur angezeigt wird, wenn die entsprechende Registerkarte ausgewählt ist.

JavaScript-Code

Schließlich müssen wir JavaScript-Code schreiben, damit der Tab-Schalter beim Klicken angezeigt wird. Sie können den folgenden Code verwenden:

const tabs = document.querySelectorAll('.tab-nav-item');
const contents = document.querySelectorAll('.tab-content');

for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener(&#39;click&#39;, function() {
    // 首先隐藏所有选项卡内容
    for (let j = 0; j < contents.length; j++) {
      contents[j].classList.remove(&#39;active&#39;);
    }
    // 设置当前选中的选项卡添加 "active" 类
    for (let j = 0; j < tabs.length; j++) {
      tabs[j].classList.remove(&#39;active&#39;);
    }
    this.classList.add(&#39;active&#39;);
    contents[i].classList.add(&#39;active&#39;);
  });
}

Nach dem Login kopieren

Der obige JavaScript-Code verwendet einen Ereignis-Listener, um die Funktion zum Umschalten des entsprechenden Tab-Inhalts zu implementieren, wenn auf die Tab-Navigationsleiste geklickt wird. Blenden Sie zunächst alle Registerkarteninhalte aus und legen Sie dann die aktuell ausgewählte Registerkarte und den entsprechenden Inhalt fest, um die Klasse „aktiv“ hinzuzufügen, um den Effekt der Anzeige der Registerkarteninhalte zu erzielen.

Vollständiger Code

Abschließend kombinieren wir den obigen HTML-, CSS- und JavaScript-Code, um den vollständigen Code wie folgt zu bilden:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tab 选项卡</title>
  <style>
    .tab-container {
      display: flex;
      flex-direction: column;
      margin: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
    }

    .tab-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #eee;
      padding: 10px;
    }

    .tab-nav-item {
      cursor: pointer;
      padding: 10px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .tab-nav-item:hover {
      background: #fff;
    }

    .tab-nav-item.active {
      background: #fff;
      font-weight: bold;
    }

    .tab-content {
      padding: 20px;
      display: none;
    }

    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-container">
    <ul class="tab-nav">
      <li class="tab-nav-item active">Tab 1</li>
      <li class="tab-nav-item">Tab 2</li>
      <li class="tab-nav-item">Tab 3</li>
    </ul>
    <div class="tab-content active">Tab 1 content</div>
    <div class="tab-content">Tab 2 content</div>
    <div class="tab-content">Tab 3 content</div>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-nav-item');
    const contents = document.querySelectorAll('.tab-content');

    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener(&#39;click&#39;, function() {
        // 首先隐藏所有选项卡内容
        for (let j = 0; j < contents.length; j++) {
          contents[j].classList.remove(&#39;active&#39;);
        }
        // 设置当前选中的选项卡添加 "active" 类
        for (let j = 0; j < tabs.length; j++) {
          tabs[j].classList.remove(&#39;active&#39;);
        }
        this.classList.add(&#39;active&#39;);
        contents[i].classList.add(&#39;active&#39;);
      });
    }
  </script>
</body>
</html>

Nach dem Login kopieren

Jetzt können Sie einen Tab-Tab selbst implementieren, indem Sie den obigen Code kopieren und einfügen, also Ihr Website ist moderner.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Tabs in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!