使用单选按钮显示标签上方的内容 - 仅限CSS?

时间:2014-03-14 11:41:51

标签: html css radio-button

我正在尝试在单击时显示标签标签上方的内容。有一个简单的方法吗?也许只使用CSS?当将内容div放在标签上方时,页面会中断......任何想法都将受到赞赏。

提前致谢!

DEMO LINK

CSS

    .tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  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; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  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;
}

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">
           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>

1 个答案:

答案 0 :(得分:1)

如果您的完整设计允许,您可以为内容区域指定固定高度和最小宽度。然后,您可以通过向其bottom属性添加负值来定位标签。

.tab label {
    background: #eee;
    left: 1px;
    margin-left: -1px;
    padding: 10px;
    position: relative;
    /*--- Updated value ---*/
    bottom: -149px;
}
...
.content {
    background: white;
    left: 0;
   /*--- Updated values ---*/
    bottom: 0;
    height: 100px;
    min-width: 350px;
   /*----*/
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
}

请在此处查看:http://jsbin.com/quceviha/1/