html - Tabset 不显示选项卡内容

Question

如果按“tab Two”，它工作得很好。但是，如果您尝试按“Tab one”返回，它不会显示 tab one 内容。

我尝试了不同的方法，但我找不到我应该在代码中修改什么以使其工作。

HTML:

<div class="tabs">
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked="">
        <label for="tab-1">
           Tab One
        </label>
        <div class="content">
            Content One
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-2">
        <label for="tab-2">
            Tab Two
        </label>
        <div class="content">
            Content Two
        </div>
    </div>
</div>

CSS:

.tabs {
  position:relative;
  min-height:200px;
  clear:both;
  margin:25px 0;
  }
.tab {
  float:left;
  }
.tab label {
  background:#eee;
  padding:10px;
  border:1px solid #ccc;
  margin-left:-1px;
  position:relative;
  left:1px;
  top:1px;
  cursor:pointer;
  }
.tab label:hover {
  background:#f8f8f8;
  }
.tab [type=radio] {
  display:none;
  }
.content {
  background:white;
  position:absolute;
  top:28px;
  left:0;
  right:0;
  bottom:0;
  padding:20px;
  border:1px solid #ccc;
  }
[type=radio]:checked ~ label {
  background:white;
  border-bottom:1px solid white;
  z-index:2;
  }
[type=radio]:checked ~ label ~ .content {
  z-index:1;
  }

这是一个 fiddle :http://jsfiddle.net/36r0ptat/

Answer 1

尝试使用其他构造

<div class="tabs">
    <div class="tab" id="tab-1">
        <div class="content">Content One</div>
    </div>
    <div class="tab" id="tab-2">
        <div class="content">Content Two</div>
    </div>
    <ul class="tabs-link">
        <li class="tab-link"> <a href="#tab-1"><span>Tab 1</span></a>

        </li>
        <li class="tab-link"> <a href="#tab-2"><span>Tab 2</span></a>

        </li>
    </ul>
</div>

并修改了css

.tabs {
    position:relative;
    min-height:200px;
    clear:both;
    margin:25px 0;
}
.tab {
    float:left;
    display: none;
}
.tab:first-of-type {
    display: inline-block;
}
.tabs-link {
    position: relative;
    top: -12px;
    height: 20px;
    left: -40px;
}
.tab-link {
    background:#eee;
    display: inline-block;
    padding:10px;
    border:1px solid #ccc;
    margin-left:-1px;
    position:relative;
    list-style-type: none;
    left:1px;
    top:1px;
    cursor:pointer;
}
.tab-link {
    background:#f8f8f8;
}
.content {
    background:white;
    position:absolute;
    top:28px;
    left:0;
    right:0;
    bottom:0;
    padding:20px;
    border:1px solid #ccc;
}
.tab:target {
    display: block;
}

您可以修改自己需要的标签

fiddle :http://jsfiddle.net/Anglan/36r0ptat/4/