Question

我正试图通过radiobutton hack / checkbox 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;
}

Answer 1

出于某种原因，在您的代码中，您将内容的顶部和底部设置为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;
}

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

1 个答案: