タブのCSS実装

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

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

 
 Tab 1 Tab 2 Tab 3 
 
 
这是Tab 1的内容
 
 
 
这是Tab 2的内容
 
 
 
这是Tab 3的内容
 
 

この例では、.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; }

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

:target疑似クラスを追加します。これは、要素のdisplayが ## に設定されることを意味します。 #要素がアンカー ターゲットによって配置されている場合のみブロックします。、特定のコンテンツを表示します。アンカーターゲットに見つからない場合は、.tab-contentのdisplayをnoneに設定して非表示にします。以上の手順でタブ切り替えエフェクトの実装が完了しました。完全なコードは次のとおりです。

.tab-content:target { display: block; } .tab-content { display: none; }

 
 Tab 1 Tab 2 Tab 3 
 
 
这是Tab 1的内容
 
 
 
这是Tab 2的内容
 
 
 
这是Tab 3的内容