<!-- ↓タブ切り替えエリア↓ -->
<div class="tabArea">
    <div id="tab01">
        <div id="tab02">
            <!-- ↓タブ↓ -->
            <ul class="tab scroll_noNav">
                <li><a href="#tab01">1111</a></li>
                <li><a href="#tab02">2222</a></li>
            </ul>
            <!-- ↑タブ↑ -->
            <div class="tabContents">
                <!-- ↓タブ 1 の内容↓ -->
                <div class="tab01">
                    <section>
                        <h1>1111</h1>
                        <p>1111</p>
                    </section>
                </div>
                <!-- ↑タブ 1 の内容↑ -->
                <!-- ↓タブ 2 の内容↓ -->
                <div class="tab02">
                    <section>
                        <h1>2222</h1>
                        <p>2222</p>
                    </section>
                </div>
                <!-- ↑タブ 2 の内容↑ -->
            <!-- .tabContents --></div>
        </div>
    </div>
</div>
<!-- ↑タブ切り替えエリア↑ -->
.tabArea {
    #tab01:target .tab01, #tab02:target .tab02 {
        display: block;
    }
    #tab01:target .tabContents div:not([class="tab01"]), #tab02:target .tabContents div:not([class="tab02"]) {
        display: none;
    }
    #tab01:target a[href$="tab01"], #tab02:target a[href$="tab02"] {
        //アクティブなタブのスタイルを書く
    }
    #tab01:not(:target) #tab02:not(:target) a[href$="tab01"] {
        //どちらも選択されていないときの最初のタブ1のスタイルを書く
    }
}