タブ切り替えを実装するための 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>

<スタイル タイプ="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{
            表示: ブロック;
        }
    </スタイル>

<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>

<スタイル タイプ="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:ターゲット{
            表示: ブロック;
        }
    </スタイル>