純粋な CSS を使用してタブを実装するための 2 つのオプション

タブは現在の Web アプリケーションで非常に一般的であり、最大の利点は、限られたスペースを最大限に活用してより多くのコンテンツを表示できることです。共通タブは通常、JavaScript によって実装され、柔軟で強力であるという利点があります。ただし、場合によっては、単純なコンテンツ スイッチのみが必要な場合は、純粋な CSS を使用して実装することを検討できます。この記事では主に 2 つの純粋な CSS 実装ソリューションを紹介します:

1.アンカーポイント + :target;

2. 純粋なアンカーポイント;

これら 2 つのそれぞれには、独自の利点と制限があります。

特定のデモについては、ここを確認してください

オプション 1: アンカー + :target

CSS3 では、新しい疑似クラス: target が導入されています。これは、ユーザーがページを操作するときにトリガーされます。たとえば、次のコードでは、ユーザーがリンクをクリックすると、p の :target 疑似クラスがトリガーされます。要素がトリガーされます。

テーブル>

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

HTML の構造は次のとおりです。

リンク先へのリンク

これは新しい段落です。

Link to Dest

This is a new paragraph.

テーブル>

CSS ソリューションを使用する場合の欠点の 1 つは、現在どのタブが選択されているかを区別するのが難しいことです。簡単な方法は、対応するタブとタブのコンテンツに同じ背景色を設定することです。が表示されると、現在のタブがより明確に識別されます。さらに、CSS3 のセレクターを使用するため、現時点では Firefox、Safari、IE8 などの最新のブラウザーでのみ使用できます。

オプション 2: 純粋なアンカーポイント

オプション 2 の原理は非常に単純です。ほとんどのブラウザでは、アンカー リンクをクリックすると、アンカーに対応するコンテンツが表示範囲内に自動的にジャンプします。この原則に従って、タブのすべてのコンテンツを高さが固定されたコンテナに入れ、コンテナのオーバーフローを非表示に設定します。また、各タブのコンテンツの高さはコンテナと一致する必要があります。この構造では、アンカーリンクをクリックすると、対応するコンテンツが可視範囲、つまりコンテナ内のコンテンツに自動的にジャンプします。

具体的な HTML 構造は次のとおりです。

   

Tab A

   

    Content A
   

   

Tab B

   

    Content B
   

   

Tab C

   

    Content C
   

   

Tab D

   

    Content D
   

使用该结构的一个好处在于缺少CSS时依然可以清晰的阅读内容。
关键的CSS代码如下

dd{
    padding: 5px;
    /*隐藏Tab的内容*/
    display:none;
    -moz-border-radius: 5px;
    margin-top:20px
}
 
dd:target{
    position: absolute;
    /*显示Tab的内容*/
    display:block;
}
/*给Tab以及相应的内容设置相同的背景色*/
.tab-a,.content-a{
    background: #CCFF00;
}
.tab-b,.content-b{
    background: #CCFFFF;
}
.tab-c,.content-c{
    background: #FFFF00;
}
.tab-d,.content-d{
    background: #FFCCFF;
}

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

テーブル>

解決策 1 とは原理が異なるため、ここでの HTML 構造はタブとコンテンツが分離された構造しか使用できません。この構造を使用する場合の 1 つの問題は、CSS が欠落している場合にコンテンツが明確に読み取れないことです。

主要な CSS コードは次のとおりです。

• タブ A


• タブ B


• タブ C


• タブ D

コンテンツA

コンテンツB

コンテンツC

コンテンツD

   
• Tab A

   
• Tab B

   
• Tab C

   
• Tab D

   

    Content A
   

   

    Content B
   

   

    Content C
   

   

    Content D
   

テーブル>

解決策 1 と同様に、ここでも選択認識の問題は、タブと対応するコンテンツに同じ背景色を設定することで解決されます。

概要

1. 純粋な CSS によって実装されたタブには多くの制限があります。たとえば、2 番目のオプションでは、各タブ コンテンツを同じ高さに設定する必要があります。

2. 現在選択されているタブを効果的に識別することはできませんが、この記事では同じ背景色を設定することで区別していますが、これは多くの場合当てはまらない可能性があります。

3. どちらのソリューションにも互換性の問題があります。最初のソリューションは CSS3 セレクターを使用しており、CSS の実装によって制限されていますが、2 番目のソリューションは Opera では機能しないと言われています。

4. オプション 1 では、ターゲットをトリガーする (または同様のインタラクションが発生する) 他のアンカー ポイントをクリックすると、タブ コンテンツが非表示になります。

/*タブ コンテンツ コンテナの高さを設定します*/
#tab_content{
高さ: 190ピクセル;
オーバーフロー: 非表示;
}
/*各タブ コンテンツの高さを設定します。これはコンテナと一致する必要があります*/
#tab_content .content{
パディング: 5px;
-moz-border-radius: 5px;
高さ: 190ピクセル;
オーバーフロー: 非表示;
}

/*给Tab Content容器设置高度*/
#tab_content{
    height: 190px;
    overflow: hidden;
}
/*给每个Tab Content定高度，需要与容器保持一致*/
#tab_content .content{       
    padding: 5px;
    -moz-border-radius: 5px;
    height: 190px;
    overflow: hidden;
}