html - input：checkedを使用するCSSのみのタブ

Question

この例（「チェック済み」バージョン）を見つけました。これは機能します。

http://jsfiddle.net/2cTwA/

しかし、入力とラベルをコンテナ要素（のような）内にラップしたいのですnavが、そうするとタブが機能しなくなります:(

これに対する解決策はありますか？

見つかった解決策：http：//jsfiddle.net/2cTwA/7/

Answer 1

HTMLとCSSを少し変更して-デモ

CSS

input { display: none; }

nav { overflow: hidden }
label   { float: left; display: inline-block; padding: 5px 10px; }
label a { color: #d33; text-decoration: underline; cursor: pointer; }   

.tab { display: none; border: 1px solid #333; padding: 10px; }
a[name="tab1"] + .tab { display: block }
:target + .tab { display: block }
:target ~ a[name="tab1"] + .tab { display: none  }

HTML

<section class="tab-area tabs-checked">

    <nav>
        <input checked type="radio" name="tab" id="tab-A" />
        <input type="radio" name="tab" id="tab-B" />
        <input type="radio" name="tab" id="tab-C" />

        <label class="tab-link" for="tab-A"><a href="#tab1">Tab 1</a></label>
        <label class="tab-link" for="tab-B"><a href="#tab2">Tab 2</a></label>
        <label class="tab-link" for="tab-C"><a href="#tab3">Tab 3</a></label>
    </nav>

    <a name="tab3"></a>
    <article class="tab">
        <h3>Tab 3</h3>          
    </article>

    <a name="tab2"></a>
    <article class="tab">
        <h3>Tab 2</h3>
    </article>    

    <a name="tab1"></a>
    <article class="tab">
        <h3>Tab 1.</h3>
    </article>

</section>

Answer 2

兄弟セレクター (~) を使用しており、nav などの包含要素を使用することで、記事の兄弟から入力とラベルを削除しています。

チルダを使用する CSS を書き換えるだけです。

Answer 3

これは、CSS のみを使用した 12(最大) タブの sass の例です。

.tabs {

  input[type=radio] {
    display: none;

    @for $i from 1 through 12 {

      &:nth-of-type(#{$i}):checked ~ .content .tab:nth-child(#{$i}) {
        display: block;
      }
    }
  }

  label {
    cursor: pointer;
    display: inline-block;
  }

  .tab {
    display: none;
  }
}

これがhtmlマークアップです

  <div class="tabs">
    <input name="controls" type="radio" id="controls-tab" checked="true"/>
    <label for="controls-tab">controls</label>
    <input name="controls" type="radio" id="panels-tab"/>
    <label for="panels-tab">panels</label>
    <input name="controls" type="radio" id="readme-tab"/>
    <label for="readme-tab">readme</label>
    <div class="content">
      <div class="tab">
      </div>
      <div class="tab">
      </div>
      <div class="tab">
      </div>
    </div>
  </div>

コンテンツ div 内でタブ div を相対的に配置する必要はありません。コンテンツの高さを設定する必要はありません。