タブ切り替えもプロジェクトではよく使われる技術です。一般的にタブ切り替えはjsやjqを使って実装されます。今日はCSSだけでタブ切り替えを実装する2つの方法を紹介します。 方法1: 原則: 対応するdivは、ラベルタグの関連属性と入力の単一選択タイプを通じて表示されます。 1. wrapというクラス名のdivをコンテナとして作成する 2. タブ切り替え項目として機能するラベルタグを4つ作成します。 3. 各ラベルに span タグ (ナビゲーション コンテンツ) と input タグ (選択と選択解除用) を作成します。タイプはラジオです。また、ナビゲーション項目がクリックされたときのコンテンツ ボックスとして div を作成します。 入力タグの名前は同じでなければならないことに注意してください。私はタブと名付けました 最終的な HTML は次のようになります。 <div class="wrap"> <ラベル> <span>ホーム</span> <input type="radio" name="tab" チェック済み> <div>ホームページ</div> </ラベル> <ラベル> <span>リスト</span> <input type="radio" name="tab"> <div>リストページ</div> </ラベル> <ラベル> <span>ニュース</span> <input type="radio" name="tab"> <div>ニュースページ</div> </ラベル> <ラベル> <span>私の</span> <input type="radio" name="tab"> <div>鉱山ページ</div> </ラベル> </div> 重要なCSSは、入力の幅を0に設定して、入力上の小さな点が現実的にならないようにし、ナビゲーション項目のクリックを使用して、ラベルの関連付けを通じてチェックされた入力を実現し、input:checked+div{display:block}を通じて対応するdivの表示を実現することです。 <スタイル タイプ="text/css"> *{マージン: 0;パディング: 0;} 。包む{ マージン: 20px 自動; 幅: 403px; 高さ: 600px; border:1px 茶色一色; 位置: 相対的; } ラベル{ 幅: 100ピクセル; 高さ: 30px; フロート: 左; テキスト配置: 中央; 行の高さ:30px; border-right: 1px 茶色一色; border-bottom: 1px 茶色一色; } ラベル:n番目の型(4){ 右境界線: なし; } ラベルスパン{ カーソル: ポインタ; } ラベル div{ 幅: 403px; 高さ: 568px; 位置: 絶対; 左: 0; 上: 31px; 背景: #eeeeee; 表示: なし; } ラベル入力{ 幅: 0; } 入力:チェック済み+div{ 表示: ブロック; } </スタイル> 方法2: 原則:切り替えはaタグのアンカーポイントを通じて実現されます。つまり、aのhrefパスはdiv idを切り替えることです。 1. wrapというクラス名のdivをコンテナとして作成する 2. クラス名が nav の div を作成し、その中に 4 つの a タグを作成します。a タグの href は、切り替え先の div の ID です。 3. 切り替えdivを配置するために、navの兄弟であるクラス名shのコンテナを作成します。 4. コンテンツを表示するためのdivを作成します。IDは上記のaタグに対応します。 最終的なコードは次のようになります。 <div class="wrap"> <div class="nav"> <a href="#home">ホーム</a> <a href="#list">リスト</a> <a href="#news">ニュース</a> <a href="#mine">私のもの</a> </div> <div class="sh"> <div id="home">ホームページ</div> <div id="list">リストページ</div> <div id="news">ニュースページ</div> <div id="mine">鉱山ページ</div> </div> </div> CSSスタイル設定、つまり、クラス名shのdivをdisplay:noneに設定し、div:target{display:block}を使用して選択した項目を表示します。 <スタイル タイプ="text/css"> *{マージン: 0;パディング: 0} 。包む{ 幅: 400ピクセル; 高さ: 600px; 境界線: 1px の茶色 マージン: 20px 自動; 位置: 相対的; } .nav{ 幅: 100%; 高さ: 30px; } .nav{ 幅: 99px; 高さ: 30px; テキスト配置: 中央; 行の高さ: 30px; border-right: 1px 茶色一色; border-bottom: 1px 茶色一色; フロート: 左; テキスト装飾: なし; 色:黒; } .sh{ 幅: 400ピクセル; 高さ: 569px; 位置: 絶対; 左: 0; 上:31ピクセル; 背景: #eeeeee; } .sh div{ 表示: なし; テキスト配置: 中央; } .sh div:ターゲット{ 表示: ブロック; } </スタイル> html でタブ切り替えを実装するサンプルコードに関するこの記事はこれで終わりです。より関連性の高い html タブ切り替えコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: CentOS7 ファイアウォールとポート関連コマンドの紹介
目次複雑なクエリとステップバイステップのクエリクエリステートメントを分割する共同クエリの分解問題のあ...
考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...
MySQLはシーケンス関数を実装する1. シーケンスレコードテーブルを作成する テーブル `sys_...
noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...
フロートの定義要素を通常のドキュメント フローから外し、要素を左または右に近づけます。親要素の端...
Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...
1. openssh-serverをインストールする yum インストール -y openssl o...
JavaScript厳密モードが 8 進数をサポートしていないという問題に関して、まず、 Java...
このアイデアを改善し、より良い意見を得られることを期待して、議論を刺激するためにいくつかの値を大まか...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...
<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...
この記事では、Windows 8 での MySQL5.6 のインストールと設定のチュートリアルを記録...
目次1. インデックスプッシュダウン最適化の原理2. インデックスプッシュダウンの具体的な実践1. ...
目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...
この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...