Question

我想显示每个标签的内容。但是有一个空的空间。

第一个标签中没有可用空间，但它存在于其他标签中。我想删除这个差距

如何解决这个问题？（请不要建议任何Java Script代码。）

下图显示了此问题

There is an empty space between the tab and the content

.tab-caption:nth-of-type(1) {
    background-color: #FFAAAA;
}

.tab-caption:nth-of-type(2) {
    background-color: #AAFFAA;
}

.tab-caption:nth-of-type(3) {
    background-color: #AAAAFF;
}

.tab-content:nth-of-type(1) {
    background-color: #FFAAAA;
}

.tab-content:nth-of-type(2) {
    background-color: #AAFFAA;
}

.tab-content:nth-of-type(3) {
    background-color: #AAAAFF;
}

.tab-status {
    display: none;
}

    .tab-status ~ .tab-caption-container {
        display: flex;
    }

        .tab-status ~ .tab-caption-container > .tab-caption {
            opacity: 0.4;
            cursor: pointer;
        }

    .tab-status:nth-of-type(1):checked ~ .tab-caption-container > .tab-caption:nth-of-type(1) {
        opacity: 1;
    }

    .tab-status:nth-of-type(2):checked ~ .tab-caption-container > .tab-caption:nth-of-type(2) {
        opacity: 1;
    }

    .tab-status:nth-of-type(3):checked ~ .tab-caption-container > .tab-caption:nth-of-type(3) {
        opacity: 1;
    }

    .tab-status ~ .tab-content-container > .tab-content {
        width: 100%;
        transform: translate(-100%);
        transition: all 1s;
    }

    .tab-status:nth-of-type(1):checked ~ .tab-content-container > .tab-content:nth-of-type(1),
    .tab-status:nth-of-type(2):checked ~ .tab-content-container > .tab-content:nth-of-type(2),
    .tab-status:nth-of-type(3):checked ~ .tab-content-container > .tab-content:nth-of-type(3) {
        transition: all 1s;
        transform: translate(0%);
        transition-delay: 1s;
    }

.tab-content-container {
    overflow: hidden;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    float: left;
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked">
    <input class="tab-status" id="tabSwitch02" type="radio" name="tab">
    <input class="tab-status" id="tabSwitch03" type="radio" name="tab">
    <div class="tab-caption-container">
        <label class="tab-caption" for="tabSwitch01">tab1</label>
        <label class="tab-caption" for="tabSwitch02">tab2</label>
        <label class="tab-caption" for="tabSwitch03">tab3</label>
    </div>
    <div class="tab-content-container">
        <div class="tab-content">tab1-data<br></div>
        <div class="tab-content">tab2-data<br>tab2-data<br></div>
        <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div>
    </div>

Answer 1

我更改了.tab-content的CSS，以便高度也是动画的。我还删除了.tab-content-container的浮动，因为它没有任何用途。

.tab-caption:nth-of-type(1) {
  background-color: #FFAAAA;
}

.tab-caption:nth-of-type(2) {
  background-color: #AAFFAA;
}

.tab-caption:nth-of-type(3) {
  background-color: #AAAAFF;
}

.tab-content:nth-of-type(1) {
  background-color: #FFAAAA;
}

.tab-content:nth-of-type(2) {
  background-color: #AAFFAA;
}

.tab-content:nth-of-type(3) {
  background-color: #AAAAFF;
}

.tab-status {
  display: none;
}

.tab-status~.tab-caption-container {
  display: flex;
}

.tab-status~.tab-caption-container>.tab-caption {
  opacity: 0.4;
  cursor: pointer;
}

.tab-status:nth-of-type(1):checked~.tab-caption-container>.tab-caption:nth-of-type(1) {
  opacity: 1;
}

.tab-status:nth-of-type(2):checked~.tab-caption-container>.tab-caption:nth-of-type(2) {
  opacity: 1;
}

.tab-status:nth-of-type(3):checked~.tab-caption-container>.tab-caption:nth-of-type(3) {
  opacity: 1;
}

.tab-status~.tab-content-container>.tab-content {
  width: 100%;
  transform: translate(-100%);
  transition: all 1s;
  height: 0;
}

.tab-status:nth-of-type(1):checked~.tab-content-container>.tab-content:nth-of-type(1),
.tab-status:nth-of-type(2):checked~.tab-content-container>.tab-content:nth-of-type(2),
.tab-status:nth-of-type(3):checked~.tab-content-container>.tab-content:nth-of-type(3) {
  transition: all 1s;
  transform: translate(0%);
  transition-delay: 1s;
  height: 100%;
}

.tab-content-container {
  overflow: hidden;
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked">
<input class="tab-status" id="tabSwitch02" type="radio" name="tab">
<input class="tab-status" id="tabSwitch03" type="radio" name="tab">
<div class="tab-caption-container">
  <label class="tab-caption" for="tabSwitch01">tab1</label>
  <label class="tab-caption" for="tabSwitch02">tab2</label>
  <label class="tab-caption" for="tabSwitch03">tab3</label>
</div>
<div class="tab-content-container">
  <div class="tab-content">tab1-data<br></div>
  <div class="tab-content">tab2-data<br>tab2-data<br></div>
  <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div>
</div>

Answer 2

空白空间是因为在浏览器3d空间（各种各样）中仍然存在先前标签的内容，导致其余标签相应地向下移动。您需要在视觉上以及在浏览器3d空间中有效地使它们不可见，即将它们的显示属性设置为display:none。但是这又引起了另一个问题，问题是display:none不会受到任何转换时间/延迟的影响，所以它几乎是瞬时的，而你的其他转换将毫无用处。

总而言之，你有三个选择

找到实现javascript / jQuery代码的方法。
你只需忍受它。
使用float和position属性

选项卡和内容之间的空白空间

2 个答案: