JavaScriptでタブを書く方法

インターネットの発展に伴い、Web サイトのインターフェイスはますますクールになり、タブは現代の Web サイトで一般的な UI 要素の 1 つになりました。この記事では、JavaScript を使用してタブを記述し、Web サイトをよりモダンにする方法を紹介します。

1. HTML 構造

まず、HTML でタブ構造を作成する必要があります。これは次のコードになります。

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

上記の HTML 構造contains タブ ナビゲーション バー (tab-nav) とタブ コンテンツ (tab-content) を含むタブ コンテナー (tab-container) が作成されます。ナビゲーション バーでは、各タブはリスト項目 (tab-nav-item) であり、「active」クラスを追加することで現在選択されているタブを示すことができます。コンテンツでは、「active」クラスを追加することで、現在選択されているタブのコンテンツを示すこともできます。

2. CSS スタイル

次に、タブとコンテンツにスタイルを追加する必要があります。次のコードを使用できます:

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

上記の CSSスタイル設定 これには、タブ コンテナの位置、サイズ、境界線、影、およびその他のプロパティ、およびナビゲーション バーとタブ コンテンツのスタイルが含まれます。タブのコンテンツの表示プロパティは none に設定されており、対応するタブが選択されている場合にのみ表示されることに注意してください。

3. JavaScript コード

最後に、クリック時にタブを切り替えて表示するための JavaScript コードを記述する必要があります。次のコードを使用できます。

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

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

上記の JavaScript コードは、イベント リスナーを使用して、タブ ナビゲーション バーがクリックされたときに対応するタブのコンテンツを切り替える機能を実装します。まず、すべてのタブ コンテンツを非表示にし、現在選択されているタブと対応するコンテンツを設定して「アクティブ」クラスを追加し、タブ コンテンツを表示する効果を実現します。

4. 完全なコード

最後に、上記の HTML、CSS、JavaScript コードを組み合わせて、次のような完全なコードを形成します。上記のコードをコピーして貼り付けることで、Tab タブを自分で実装して、Web サイトをよりモダンにすることができます。

以上がJavaScriptでタブを書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。