仅使用输入的CSS选项卡：选中

Question

我找到this example（“已检查”版本）并且有效：

http://jsfiddle.net/2cTwA/

但是我想将输入和标签包装在容器元素（如nav）中，如果我这样做，标签就会停止工作：（

有没有解决方案？

找到解决方案：http://jsfiddle.net/2cTwA/7/

Answer 1

稍加修改HTML和CSS - DEMO

的 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中相对定位tab div。无需设置内容高度。