タブのCSS実装

Web デザインでは、タブ切り替え効果を実現することが一般的な要件です。この効果はCSSを使えば簡単に実現できるので、CSSを使ってタブ切り替えを実現する方法を詳しく解説していきます。

まず、HTML コードを準備する必要があります。タブの切り替えは、多くの場合、以下に示すように、一連のコンテンツ領域と対応するナビゲーション ボタンで構成されます。

<div class="tabs">
  <div class="tab-nav">
    <a href="#" class="active">Tab 1</a>
    <a href="#">Tab 2</a>
    <a href="#">Tab 3</a>
  </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>

この例では、.tabs コンテナを使用してタブ関連の要素を読み込みます。ナビゲーション ボタンとコンテンツ領域が含まれます。 .tab-nav はタブ ナビゲーション ボタンの配置に使用され、.tab-content はタブ コンテンツの配置に使用され、.active はデフォルトの状態を表します。ナビゲーション ボタンまたはコンテンツ領域。

次に、CSS を使用してタブ切り替え効果を実現する必要があります。疑似クラス :hover または :focus を使用して、ナビゲーション ボタンのホバーまたはフォーカス効果を実現できます。たとえば、次のようになります。 ##.tab -nav a

追加

:hover および :focus 疑似クラス。マウスがホバーしているか、ナビゲーション ボタンがフォーカスされているとき、背景色が表示されます#ccc 効果。これにより、ユーザーは選択したタブをより直感的に認識できるようになります。 次に、タブ切り替えのアニメーション効果を追加する必要があります。この効果は、CSS3 の transition

属性を使用して実現できます。例:

.tab-nav a:hover,
.tab-nav a:focus {
  background-color: #ccc;
}

ここでは、.tab-content

opacity のデフォルト状態を設定します。 0 に設定すると、コンテンツが表示されません。次に、transition 属性を .tab-content に追加しました。これは、フェードインおよびフェードアウト効果が 0.3 秒以内に生成されることを意味します。 .tab-content が .active 状態にある場合、opacity は 1 に設定され、特定のコンテンツが表示されます。 最後に、タブ ナビゲーション ボタンとコンテンツ領域の間のリンクを実現する必要があります。ここでは、CSS の :target

疑似クラスを使用できます。例:

.tab-content {
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.tab-content.active {
  opacity: 1;
}

ここまでです.tab-content

:target 疑似クラスを追加します。これは、要素の display が ## に設定されることを意味します。 #要素がアンカー ターゲットによって配置されている場合のみブロックします。、特定のコンテンツを表示します。アンカーターゲットに見つからない場合は、.tab-content の display を none に設定して非表示にします。 以上の手順でタブ切り替えエフェクトの実装が完了しました。完全なコードは次のとおりです。 <pre class='brush:css;toolbar:false;'>.tab-content:target { display: block; } .tab-content { display: none; }</pre><pre class='brush:html;toolbar:false;'>&lt;div class=&quot;tabs&quot;&gt; &lt;div class=&quot;tab-nav&quot;&gt; &lt;a href=&quot;#tab1&quot; class=&quot;active&quot;&gt;Tab 1&lt;/a&gt; &lt;a href=&quot;#tab2&quot;&gt;Tab 2&lt;/a&gt; &lt;a href=&quot;#tab3&quot;&gt;Tab 3&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;tab-content active&quot; id=&quot;tab1&quot;&gt; &lt;p&gt;这是Tab 1的内容&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;tab-content&quot; id=&quot;tab2&quot;&gt; &lt;p&gt;这是Tab 2的内容&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;tab-content&quot; id=&quot;tab3&quot;&gt; &lt;p&gt;这是Tab 3的内容&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</pre> 上記の手順により、CSS を使用して Web ページでタブ切り替え効果を簡単に実現できるようになります。

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