选项卡和内容之间为空 space
Empty space between tab and content
我想显示每个选项卡的内容。但是有一个空的space.
第一个标签中没有免费的space,但它存在于其他标签中。我想消除这个差距
如何解决这个问题? (请不要建议任何 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>
空space是因为浏览器3dspace(各种)中仍然存在前一个选项卡的内容,导致其余部分向下移动因此。您需要有效地使它们在视觉上和浏览器 3d space 中都不可见,即将它们的显示 属性 设置为 display:none
。但这会导致另一个问题,问题是 display:none
不受任何转换 timings/delays 的影响,因此它几乎是瞬时的,您的其他转换将毫无用处。
总而言之,您有三个选择
- 找到一些方法来实现 javascript/jQuery 代码。
- 你只能忍受它。
- 探索
float
和 position
属性
我为 .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>
我想显示每个选项卡的内容。但是有一个空的space.
第一个标签中没有免费的space,但它存在于其他标签中。我想消除这个差距
如何解决这个问题? (请不要建议任何 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>
空space是因为浏览器3dspace(各种)中仍然存在前一个选项卡的内容,导致其余部分向下移动因此。您需要有效地使它们在视觉上和浏览器 3d space 中都不可见,即将它们的显示 属性 设置为 display:none
。但这会导致另一个问题,问题是 display:none
不受任何转换 timings/delays 的影响,因此它几乎是瞬时的,您的其他转换将毫无用处。
总而言之,您有三个选择
- 找到一些方法来实现 javascript/jQuery 代码。
- 你只能忍受它。
- 探索
float
和position
属性
我为 .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>