JavaScriptでタブを書く方法

PHPz
リリース: 2023-04-25 16:44:08
オリジナル
807 人が閲覧しました

インターネットの発展に伴い、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」クラスを追加することで、現在選択されているタブのコンテンツを示すこともできます。

  1. 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 に設定されており、対応するタブが選択されている場合にのみ表示されることに注意してください。

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

  1. 完全なコード

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート