BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

タブ切り替えのためのhtmlサンプルコード

2022-01-07 17:30:44

プロジェクト内のタブスイッチも一般的な技術とみなされ、タブスイッチの一般的な実装は、jsやjqの実装を使用して、今日は2つのCSSのみのタブスイッチ方式を導入しています。

方法1

原理：対応するdivの表示は、labelタグの関連属性と入力のradioタイプによって実現される

1. コンテナとしてクラス名wrapのdivを作成します。

2. タブトグルとして機能する4つのラベルタグを作成します。

3. 各ラベルには、spanラベル（ナビゲーションコンテンツ）、radioタイプの入力ラベル（チェックとアンチェックを有効にする）、そしてコンテンツボックスを表示するためにクリックされるナビゲーションアイテムとしてdivを作成します。

ここで、inputタグの名前を同じにする必要があることに注意してください、私の側はtabという名前です

最終的なHTMLは次のようになります。 

<div class="wrap">
    <label>
        <span>home</span>
        <input type="radio" name="tab" checked>
        <div>home-page</div>
    </label>
    <label>
        <span>list</span>
        <input type="radio" name="tab">
        <div>list-page</div>
    </label>
    <label>
        <span>news</span>
        <input type="radio" name="tab">
        <div>news-page</div>
    </label>
    <label>
        <span>mine</span>
        <input type="radio" name="tab">
        <div>mine-page</div>
    </label>
</div>

重要なcssは、inputのdotを非現実的にするためにwidthを0にし、ナビゲーションアイテムのクリックにラベルを関連付けることでinputのcheckedを実現し、input:checked+div{display:block}で該当divの表示を実現することである。 

<style type="text/css">
        *{margin: 0;padding: 0;}
        .wrap{
            margin: 20px auto;
            width: 403px;
            height: 600px;
            border:1px solid brown;
            position: relative;
        }
        label{
            width: 100px;
            height: 30px;
            float: left;
            text-align: center;
            line-height:30px;
            border-right: 1px solid brown;
            border-bottom: 1px solid brown;
        }
        label:nth-of-type(4){
            border-right: none;
        }
        label span{
            cursor: pointer;
        }
        label div{
            width: 403px;
            height: 568px;
            position: absolute;
            left: 0;
            top: 31px;
            background: #eeeeee;
            display: none;
        }
        label input{
            width: 0;
        }
        input:checked+div{
            display: block;
        }
    </style>

方法2

原理:aタグのアンカーで切り替えを行う。つまり、a hrefのパスが切り替え対象のdivのidとなる。

1. wrapというクラス名のdivをコンテナとして作成します。

2. navというクラス名のdivを作成し、中にaタグを4つ作成、aタグのhrefが切り替え先のdivのidになります。

3. navの兄弟であるshというクラスでコンテナを作成し、切り替えたdivを格納します。

4. 上記のaタグに対応するidを持つdisplay content divを作成します。

最終的には次のようなコードになります。 

<div class="wrap">
    <div class="nav">
        <a href="#home">home</a>
        <a href="#list">list</a>
        <a href="#news">news</a>
        <a href="#mine">mine</a>
    </div>
    <div class="sh">
        <div id="home">home-page</div>
        <div id="list">list-page</div>
        <div id="news">news-page</div>
        <div id="mine">mine-page</div>
    </div>
</div>

cssのスタイル設定、つまりクラス名shの下のdivはdisplay:noneとし、div:target{display:block}で選択項目を表示するようにする。 

<style type="text/css">
        *{margin: 0;padding: 0}
        .wrap{
            width: 400px;
            height: 600px;
            border: 1px solid brown;
            margin: 20px auto;
            position: relative;
        }
        .nav{
            width: 100%;
            height: 30px;
        }
        .nav a{
            width: 99px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-right: 1px solid brown;
            border-bottom: 1px solid brown;
            float: left;
            text-decoration: none;
            color:black;
        }
        .sh{
            width: 400px;
            height: 569px;
            position: absolute;
            left: 0;
            top:31px;
            background: #eeeeee;
        }
        .sh div{
            display: none;
            text-align: center;
        }
        .sh div:target{
            display: block;
        }
    </style>

今回紹介したのはhtmlタブ切り替えのサンプルコードで、もっと関連するhtmlタブ切り替えの内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともスクリプトハウスを応援よろしくお願いします

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します