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

Question

我找到了这个例子（“检查”版本）并且它有效：

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