CSS タブのヒント_PHP チュートリアル-PHPチュートリアル-php.cn

CSS タブのヒント_PHP チュートリアル

WBOY

リリース： 2016-07-22 09:02:33

オリジナル

1028 人が閲覧しました

プログラマーは皆、タブが一般に Javascript によって実装されることを知っています。JavaScript の利点は強力で柔軟性があることです。ただし、単純なコンテンツの切り替えだけが必要な場合は、CSS を使用してタブを実装できる特殊なケースもあります。では、CSS を使用してタブを実装するにはどうすればよいでしょうか?エディターに参加して、タブテクニックを実装するための CSS を学びましょう!
1. アンカー + :target;
2. 純粋なアンカーポイント;
これら 2 つのそれぞれには、独自の利点と制限があります。
具体的なデモについては、こちらをご覧ください
オプション 1: アンカー + :ターゲット
CSS3 では、新しい疑似クラス: target が導入されています。これは、ユーザーがページを操作するときにトリガーされます。たとえば、次のコードでは、ユーザーがリンクをクリックすると、p 要素の :target 疑似クラスがトリガーされます。引き金になった。
リンク先にリンク

これは新しい段落です。

解決策 1 は、:target 疑似クラスを使用してタブ切り替えを実装することです。実装原理は次のとおりです。ページがロードされると、タブに対応するコンテンツは CSS によって非表示になり、タブのコンテンツは :target 擬似クラスで表示されるように設定されます。
HTML の構造は次のとおりです:

タブ A: コンテンツA
タブ B: コンテンツB
タブ C: コンテンツC
タブ D: コンテンツD

この構造を使用する利点の 1 つは、CSS なしでもコンテンツを明確に読み取ることができることです。
主要なCSSコードは次のとおりです

dd{
パディング: 5px;
/*タブの内容を非表示*/
ディスプレイ:なし;
-moz-border-radius: 5px;
余白上部:20px
}

dd:ターゲット{
位置: 絶対;
/*タブの内容を表示*/
表示:ブロック;
}
/*タブと対応するコンテンツに同じ背景色を設定します*/
.tab-a,.content-a{
背景: #CCFF00;
}
.tab-b,.content-b{
背景: #CCFFFF;
}
.tab-c,.content-c{
背景: #FFFF00;
}
.tab-d,.content-d{
背景: #FFCCFF;
}

CSS ソリューションを使用する場合の欠点の 1 つは、現在どのタブが選択されているかを区別するのが難しいことです。簡単な方法は、対応するタブとタブのコンテンツに同じ背景色を設定して、タブのコンテンツが表示されるときに現在の背景色を設定することです。タブをより明確に識別できます。さらに、CSS3 のセレクターを使用するため、現時点では Firefox、Safari、IE8 などの最新のブラウザーでのみ使用できます。
オプション 2: 純粋なアンカーポイント
オプション 2 の原理は非常に単純で、ほとんどのブラウザでは、アンカーリンクをクリックすると、アンカーに対応するコンテンツが表示範囲内に自動的にジャンプします。この原則に従って、タブのすべてのコンテンツを高さ固定のコンテナーに配置し、コンテナーのオーバーフローを非表示に設定します。また、各タブのコンテンツの高さはコンテナーと一致する必要があります。この構造では、アンカーリンクをクリックすると、対応するコンテンツが可視範囲、つまりコンテナ内のコンテンツに自動的にジャンプします。
具体的な HTML 構造は次のとおりです:

タブ A

タブ B

タブ C

タブ D

コンテンツA

コンテンツB

コンテンツC

コンテンツD

解決策 1 とは原理が異なるため、ここでの HTML 構造はタブとコンテンツが分離された構造しか使用できません。この構造を使用する場合の 1 つの問題は、CSS が欠落しているとコンテンツが明確に読み取れないことです。
主要な CSS コードは次のとおりです:
/*タブコンテンツコンテナの高さを設定*/
#tab_content{
高さ: 190px;
オーバーフロー: 非表示;
}
/*各タブコンテンツの高さを設定します。これはコンテナと一致する必要があります*/
#tab_content .content{
パディング: 5px;
-moz-border-radius: 5px;
高さ: 190px;
オーバーフロー: 非表示;
}
解決策 1 と同様に、ここでも選択認識の問題は、タブと対応するコンテンツに同じ背景色を設定することで解決されます。
概要:
1. 純粋な CSS によって実装されたタブには多くの制限があります。たとえば、2 番目のオプションでは、各タブコンテンツを同じ高さに設定する必要があります。
2. 現在選択されているタブを効果的に識別することはできませんが、この記事では同じ背景色を設定することで区別していますが、これは多くの場合には当てはまりません。
3. どちらのソリューションにも互換性の問題があります。最初のソリューションは CSS3 セレクターを使用しており、CSS の実装によって制限されています。一方、2 番目のソリューションは Opera では機能しないと言われています。
4. オプション 1 では、:target をトリガーする (または同様のインタラクションが発生する) 他のアンカーをクリックすると、タブのコンテンツが非表示になります。