純粋な CSS_PHP チュートリアルを使用してタブを実装するための 2 つのオプション

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

 

　　案 1 の原理と同様に、この HTML 構造でもタブとコンテンツが分離された構造しか使用できませんが、この構造を使用すると、CSS が失われた場合にコンテンツをクリアできないという問題があります。

　　关键のCSS代コードは以下の通り：

/*タブコンテンツコンテナの設置高さ*/ #tab_content{
    高さ: 190px;
    オーバーフロー: 非表示;
}
/*タブコンテンツの高さ、容器と一致する必要がある*/
#tab_content .content{
    パディング: 5px;
    -moz-border-radius: 5px;
    高さ: 190px;
    オーバーフロー: 非表示;
}
 

　　案と同様に、ここでもタブと関連するコンテンツに同じ背景色を設定することで選択中の問題を解決します。

　　总结

　　1. 通常の CSS で実現されるタブは非常に多く、たとえば案 2 では各タブ コンテンツを同じ高さに配置する必要があります。

　　2. 無効なマーク 現在のオプションのタブ。ここでは同じ背景色を設定することによって区別されており、多くの場合に必ずしも適していません。

　　3. 2 つの方式には互換性の問題があり、方式は CSS3 の選択符号を使用しており、CSS の実装に制限されていますが、方式は Opera では動作しません。

　　4. 案では、他のポイントがターゲットのポイントを刺激する (または同様のやり取りが発生する) と、タブのコンテンツが移動します。

http://www.bkjia.com/PHPjc/735089.html

www.bkjia.com

tru​​e