javascript - HTML Div 隐藏时占用空间
问题描述
我有个问题。我做了下面的tabbedPage，但是隐藏的内容还是占空间。这是代码：
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active {
opacity: 1;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="active">
statistics
</div>
<div>
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>现在 TabbedPage 正在按我想要的方式工作，除了选项卡的内容总是使用空间而不显示。我可以通过设置来修复它position: absolute;，但是内容会通过页脚，这也是不允许的。那么如何删除隐藏选项卡使用的空间，而不是通过页脚呢？
解决方案
您应该使用display而不是opacity.
但你也应该div设置display: block;如下div.active：
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
请注意，如果您要设置div的内容与您需要添加div.active的内容不同，以确保正确使用。display!important
您还需要在 for 循环中更改一些 js，如下所示：
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
为了使其正常工作，我添加了类和 id，例如stat，userManagement因为它不再正确识别 div。
演示（简单示例）：
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
statistics
</div>
<div class="userManagement">
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
<div>DIV IN DIV 2</div>
</div>
<div id="userManagement">
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>演示（大示例）：
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*-------------Statistics---------------*/
.activity-24h-title {
color: #000000;
font-size: 30px;
font-weight: bold;
}
.activity-24h {
width: 100%;
height: 125px;
background-color: #F6F6F6;
display: flex !important; /** Add !important **/
align-items: center;
justify-content: center;
}
.activity-24h .stat-frame {
position: relative;
width:calc(100% / 5 - (4 * 2px));
display: flex !important; /** Add !important **/
flex-direction: column
}
.activity-24h .stat-frame-title {
color: #000000;
font-size: 22px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
.activity-24h .stat-frame-value {
color: #d81e05;
font-size: 42px;
font-weight: bold;
width: 100%;
text-align: center;
}
.activity-24h .seperation-border {
width: 2px;
height: 80%;
background-color: #C4C4C4;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
Statistieken
</div>
<div class="userManagement">
Gebruikersbeheer
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<span class="activity-24h-title">Afgelopen 24 uur</span>
<div class="activity-24h">
<div class="stat-frame">
<span class="stat-frame-title">Nieuwe gebruikers</span>
<span class="stat-frame-value">513</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Actieve gebruikers</span>
<span class="stat-frame-value">1054</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Matches</span>
<span class="stat-frame-value">1577</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Gerapporteerd</span>
<span class="stat-frame-value">33</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Geblokkeerd</span>
<span class="stat-frame-value">9</span>
</div>
</div>
</div>
<div id="userManagement">
<h2>This is about section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>推荐阅读
- javascript - 滚动替换
- bokeh - 如何使用散景服务器更新 bokeh.plotting.figure.y_axis
- c# - 可以打开上传到blob容器的excel文件吗？
- ruby - 基于 Rails 和 mongoid 中的项目管理用户角色
- json - 如何在 Oracle 18c 中创建手动 JSON？
- ios - Swift 4.2 编译器无法导入使用 Swift 4.0.3 编译的模块
- ios - “致命错误：在使用 JSON 的 Swift 上展开可选值时意外发现 nil”
- angular - 在 stackblitz 中向 Angular 应用程序添加测试用例时出错
- yaml - GitLab CI/CD 通用配置
- node.js - 具有多个字段的 $lookup