CSS実装タブ

CSS はタブ スタイルを実装します

タブ スタイルは、Web 開発で非常に一般的なインタラクティブ デザインです。複数のコンテンツ領域をタブ ページの形式で表示します。ユーザーはタブをクリックすることで表示領域を切り替えます。 Webページの使いやすさが大幅に向上しました。この記事では、CSS を使用して簡単なタブ スタイルを実装する方法を説明します。

最初に、HTML 構造を定義する必要があります。具体的な構造は次のとおりです:

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

上記の構造では、コンテナとして div 要素を使用しており、これには 2 つのサブ要素が含まれています、つまりタブヘッダーとタブコンテンツです。タブ ヘッダーは button 要素を使用して各タブを表し、タブのコンテンツは div 要素を使用してラップされます。その中で、各タブとタブのコンテンツは、現在選択されているタブを表すために使用される active クラス名に関連付けられています。

次に、CSS を使用してスタイルを定義します。まず、ボタン要素のデフォルト スタイルを削除する必要があります。

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

上記のスタイルでは、ボタン要素の背景、境界線、アウトライン、およびパディングを削除して、プレーン テキスト リンクのように見せます。また、マウス ポインターのスタイルを手の形に設定して、クリック可能なボタンのように見せます。

次のステップでは、タブの背景色とアクティブ化ステータスを実現するために .tab-header のスタイルを設定します。

.tab-header {
  display: flex;
}

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

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

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

上記のスタイルでは、次を使用します。タブを水平に配置するフレックスボックス レイアウト。次に、.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 クラス名を現在のタブに追加してアクティブにします。このようにして、シンプルなタブ スタイルを実装することに成功しました。

概要:

この記事では、CSS と JavaScript を使用して単純なタブ スタイルを実装しました。最初に HTML 構造を定義し、次に CSS を使用してタブの背景色、ホバー状態、アクティブ化状態を定義しました。最後にJavaScriptを使用して、タブをクリックすることでコンテンツを切り替える機能を実装します。このスタイルの実装はシンプルで、理解しやすく、変更しやすいため、ほとんどの Web 開発プロジェクトに適しています。

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