css - 使用复选框hack的CSS选项卡的问题-仅CSS

我试图通过单选按钮hack /复选框hack使我的标签正常工作。我的标签位于底部，当您单击它们时，内容会显示在它们的上方，但是，我的标签非活动标签会消失。有什么想法吗？

这是我的演示JSFIDDLE

的HTML

    <h1> id elementum risus</h1>
<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1">
       <label for="tab-1">Tab One</label>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus varius urna, ac venenatis arcu convallis consequat. In augue est, posuere auctor facilisis varius, dictum ac risus. Donec nibh justo, aliquam sed tempus quis, lobortis sed orci.
       </div>
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       <div class="content">
           Vivamus id elementum risus. In sit amet mi nulla, ac sollicitudin odio. Phasellus laoreet leo vitae velit lobortis at condimentum odio placerat. Nam sapien eros, accumsan id porttitor a, commodo ut urna. Cras dignissim metus quis enim placerat lobortis.
       </div>
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           Phasellus scelerisque luctus ligula, a consequat orci posuere rutrum. Sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. Mauris viverra pretium ante, eu mollis nisi volutpat quis. Nunc neque erat, pharetra in feugiat eget, faucibus id sem.
       </div>
   </div>

</div>

的CSS

.tabs {
  position: relative;
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  margin-left: -1px;
  position: relative;
  left: 1px;
  bottom: -10px;
}
.tab [type=radio] {
  display: none;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  height: 100px;
  min-width: 350px;
  display: none;
}
[type=radio]:checked ~ label {
  background: white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}
[type=radio]:checked ~ .content {
  display: block;
}
[type=radio]:checked ~ label {
    bottom:-149px;
}

最佳答案

由于代码中的某些原因，您将内容的顶部和底部设置为0，这导致它覆盖了其他选项卡。这是一个工作版本：

http://jsfiddle.net/sKjc4/3/

CSS：

.tabs {
    position: relative;
    /* This part sucks */
    clear: both;
    margin: 25px 0;
    min-height: 50px;
}
.tab {
    float: left;
}
.tab label {
    background: #eee;
    padding: 10px;
    margin-left: -1px;
    position: relative;
    left: 1px;
    bottom: -10px;
}
.tab[type=radio] {
    display: none;
}
.content {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    right: 0;
    height: 100px;
    min-width: 350px;
    display: none;
}
[type=radio] {
    display: none;
}
[type=radio]:checked ~ label {
    background: white;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}
[type=radio]:checked ~ .content {
    display: block;
}