純粋なCSS_html/css_WEB-ITnoseでエレガントなタブページを実現

手順

これは練習用の別のガジェットであり、それ自体に技術的な内容はなく、いくつかの珍しい CSS3 機能を組み合わせたものです。

キーポイント

• 属性のラベルラベル
• :ラジオボタンの擬似クラスを確認する
• CSSプラス記号[+]セレクター

レンダリング

原則

通常、相互作用タブ ページでは、タブ ヘッダーをクリックして、対応するコンテンツを表示します。この独占性は、HTML の特定のネイティブ機能とよく似ています。それは正しい！ラジオボタングループです。

ラジオ ボタン グループには、選択後のラジオ ボタンのスタイルを設定できる :checked 疑似クラスがあります。そのため、ラジオ ボタン ボックスのグループをタブ ページの先頭として使用する必要がありますか?もちろん、そうではありません。ラジオ ボタンは非常に頑固であり、CSS で影響を与えるのは非常に困難です。

ここでは、CSS で +selector を使用する必要があります [実際には、これまでにこのセレクターを使用したことがありません -_-||]。簡単に言うと、+selector は、特定の指定された要素の後に を選択することです。要素 の詳細については、http://www.w3school.com.cn/cssref/selector_element_plus.asp

を参照してください。 Label の for 属性は非常に興味深いもので、リモート コントロールとして理解できます。ページの下部にある label は、for 属性を使用して、ページ上部のラジオ ボタンまたはチェック ボックスを制御できます~、すごいと思いませんか? (Pfft→_→)

上記の特性と組み合わせると、タブ ページを実装するための基本的なアイデアが得られます。

ラジオ ボタンの後にラベル [タブ ヘッダー] が続き、その後に div [タブ] が続きます。コンテンツ ブロック]

.radio:checked + .tab-header を使用して、現在のタブ ヘッダーのスタイルを指定します
.radio:checked + .tab-header + .tab-content を使用して、現在のタブ コンテンツ ブロックのスタイルを指定します

コード

うわー

HTML 部分は上の通り、4 つのブロック、4 つの傑作、インチキ

うわー

CSS コードは上の通り、書き方が悪く、ライトスプレー〜

可視性 + 不透明度を使用して要素の表示と非表示を制御する、実際にはアニメーション効果を実現するため（ここではインストールの強制的な疑いがあります）、表示は遷移を妨げますが、可視性は妨げないため、さらに、代わりにポインターイベント+不透明度を使用することもできます。

コードは上記の通りで、jsbin アドレスが添付されています: http://output.jsbin.com/cicadu

新しいバージョンの opera/chrome/firefox ではテストは完璧ですが、深刻な問題があります。 safari タブを切り替えた後、タブのコンテンツブロックにスタイルが適用されているようですが、視覚的にはページが再描画されません。有効になる前に開発者ツールに焦点を当てます。具体的な理由が不明な場合は、お気軽に教えてください。