标签和内容之间的空白空间
我想显示每个标签的内容。但是有一个空的空间。标签和内容之间的空白空间
第一个选项卡中没有可用空间,但它存在于其他选项卡中。我想消除这种差距
如何解决这个问题? (请不要提出任何Java脚本代码。)
下图显示了这个问题
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>
.tab-content
使得高度也动画。因为它没有任何用途,所以我也删除了浮点数.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>
空的空间是因为一个事实,即仍有在浏览器三维空间中存在前一个选项卡的内容(各种),导致其他选项相应地向下移动。您需要有效地使它们在视觉上以及在浏览器3d空间中都不可见,即将其显示属性设置为display:none
。但是这会引起另一个问题,问题是display:none
不受任何转换时序/延迟的影响,因此它几乎是瞬时的,而其他转换将毫无用处。
所以总结起来有三种选择
- 找到某种方式来实现的JavaScript/jQuery代码。
- 你只需要忍受它。与周围的
float
和position
性能
我选择了第三项。我应该怎么做? –
一个简单的方法是了解更接近的图像滑块或滑块的机制,这里是一个纯粹的CSS教程,只是根据您的需要调整它。链接:https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ –
你是最棒的! TNQ♥ –