0

我目前正在使用仅使用 CSS3 制作的标签栏（我真的想避免使用任何 javascript/jquery）。我找到了一个不错的教程，并根据我的需要修改了源代码。不幸的是，我的标签栏下方的任何内容都将放置在“标签内容”-ids 的背景中，因为它们以绝对模式定位。但我希望例如页脚出现在我的标签栏内容下方，高度可变，而不是在它后面。我已经尝试更改定位参数，但结果“标签内容”将在单个 tab1/2/3/4-labels 下流动。

这是我的样式表：

    .tabs input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.tabs {
    width: 960px;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin-top:30px;
    font-size:14px;
}
.tabs li {
    float: left;
}
.tabs label {
    display: block;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    -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;
    color: #aaa;
}
.tabs label:hover {
    top: 0;
    color: #000;
}
[id^=tab]:checked + label {
    color: #000;
}
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div {
    display: block;
}
.tab-content {
    z-index: 2;
    display: none;
    text-align: left;
    overflow: hidden;
    width: 100%;
    line-height: 140%;
    padding-top: 10px;
    padding: 15px;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    font-size:14px;
    float:left;
}
.tab-content > div {
    display: none;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.TabBar {
    float:left;
    width: 960px;
    height:auto;
}

和我的HTML源代码：

<!-- TABBAR !-->
  <div class="TabBar">
    <ul class="tabs">
      <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">First Tab</label>
        <div id="tab-content1" class="tab-content">
          <div class="animated  fadeInRight"> Lorem Ipsum 1 </div>
        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">Second Tab</label>
        <div id="tab-content2" class="tab-content">
          <div class="animated  fadeInRight"> Lorem Ipsum 2 </div>
        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">Third Tab</label>
        <div id="tab-content3" class="tab-content">
          <div class="animated  fadeInRight "> Lorem Ipsum 3 </div>
        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab4">
        <label for="tab4">Fourth Tab</label>
        <div id="tab-content4" class="tab-content">
          <div class="animated  fadeInRight "> Lorem Ipsum 4 </div>
        </div>
      </li>
    </ul>
  </div>

这里是我在 CodePen 上的问题的一个例子：http: //codepen.io/DanielCoding/pen/Fxrnw

我不知道我该如何处理。

先感谢您！

4

3 回答 3

2

如果我理解这个问题，你必须改变你的 CSS 中的一些属性。

  1. .tab-content set whitout position propiretes(only float:left;) 并设置 margin-top: 35px;
  2. .tabs 标签设置位置：绝对并为永远标签单独设置左侧属性，例如 .tabs label:nth-child(1){left:0px} .tabs label:nth-child(2){left:100px} .tabs label: nth-child(3){left:200px}

现在您可以在页面末尾添加 div 页脚。

我希望这会有所帮助。

于 2013-10-06T19:12:49.020 回答
2

我修改了你的css。它现在工作正常。

.wrapper .TabBar {
  position: relative;
  height: 200px;
}
.wrapper .TabBar ul {
  padding: 0;
}
.wrapper .TabBar ul li {
  list-style: none;
  display: inline-block;
}
.wrapper .TabBar ul li input[type=radio] {
  position: relative;
  width: 100%;
  opacity: 0;
  top: 20px;
  cursor: pointer;
}
.wrapper .TabBar ul li input[type=radio]:checked ~ .tab-content {
  display: block;
}
.wrapper .TabBar ul li input[type=radio]:checked + label {
  background-color: #00c9ed;
}
.wrapper .TabBar ul li input[type=radio]:hover + label {
  background-color: #8eeeff;
}
.wrapper .TabBar ul li label {
  cursor: pointer;
  display: block;
  background-color: #eee;
  padding: 10px;
}
.wrapper .TabBar ul li label:hover {
  background-color: #8eeeff;
}
.wrapper .TabBar ul li .tab-content {
  position: absolute;
  left: 0;
  display: none;
}

你需要应用你的动画。

于 2013-10-06T20:11:04.903 回答
0

如果我理解这个问题，那么你只需要添加一些 CSS 来强制标签容器环绕浮动元素并占据元素的高度。

只需添加

.tabs {
  overflow:hidden;
  ...

我希望这有帮助。

于 2013-10-06T18:54:02.817 回答