0

我有一个 div，里面有一个选项卡式菜单列表，当我选择任何选项卡时，内容应该显示在同一页面中。

没有 div（所以只是作为一个列表）它可以正常工作 请参阅此处的工作 JSFIDDLE但是使用 div，内容根本不会出现。这里有问题的 JSFIDDLE

我确信这不会太难，但我只是看不到问题所在。

任何人都可以建议吗？

工作 HTML：

<ul class="tabs">
    <li>
      <input type="radio" checked name="tabs" id="tab1">
      <label for="tab1">tab 1</label>
      <div id="tab-content1" class="tab-content animated fadeIn">
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab2">
      <label for="tab2">tab 2</label>
      <div id="tab-content2" class="tab-content animated fadeIn">
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE v CONTENT GOES HERE CONTENT GOES HERE
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab3">
      <label for="tab3">tab 3</label>
      <div id="tab-content3" class="tab-content animated fadeIn">
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE v CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
        CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE CONTENT GOES HERE 
      </div>
    </li>
</ul>

和工作CSS：

.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
}
.tabs {
width: 980px;
float: none;  
list-style: none;
position: relative;
padding: 0;
margin: 20px auto;
}
  .tabs li{
    float: left;
  }
  .clearFix
{
clear: both;
} 
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
  .tabs label:hover {
    background: rgba(255,255,255);
    top: 0;
  }

  [id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
  }

  [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
  .tab-content{
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #08C;
    padding: 15px;
    color: #4a4949;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }

有问题的 CSS 位：

 .cont-wrapper{
    width: 980px;
    background: #82cff5;
    padding-right: 20px;
    padding-left: 20px;
overflow:hidden;
  }
4

2 回答 2

0

您没有在 上设置高度div，并且overflow设置为hidden，因此选项卡下方的任何内容均不可见。设置一个高度div.cont-wrapper应该可以解决它。

于 2014-02-03T17:19:36.527 回答
0

看起来您没有看到内容，因为您overflow:hidden;在包含元素上。这隐藏了试图在.cont-wrapper

我会将标签保留在与复制块分开的 div 中，这样事情应该会更容易。

CSS：

   .cont-wrapper{
    //other styles
    overflow:hidden; // <- remove this entry
   }
于 2014-02-03T17:19:47.627 回答