Javascript删除div空间使用

Javascript删除div空间使用,javascript,html,css,Javascript,Html,Css,我有个问题。我有这个选项卡式页面,但是不可见的内容仍然占用了空间,所以所有的div都在彼此的下方。我希望空间使用消失,但仍然希望我创建的动画。以下是片段: let tabHeader=document.getElementsByClassName(“tabbedpage header”)[0]; 让tabIndicator=document.getElementsByCassName(“tabbedpage指示符”)[0]; 让tabContent=document.getElementsBy

我有个问题。我有这个选项卡式页面,但是不可见的内容仍然占用了空间,所以所有的div都在彼此的下方。我希望空间使用消失,但仍然希望我创建的动画。以下是片段:

let tabHeader=document.getElementsByClassName(“tabbedpage header”)[0];
让tabIndicator=document.getElementsByCassName(“tabbedpage指示符”)[0];
让tabContent=document.getElementsByClassName(“tabbedpage内容”)[0];
设tabsPane=tabHeader.getElementsByTagName(“div”);
for(设i=0;i div{
宽度:计算(100%/2);
文本对齐:居中;
颜色:#888;
字号:600;
光标:指针;
字体大小:20px;
文本转换:大写;
大纲:无;
}
.tabbedpage.tabbedpage页眉>div>i{
显示:块;
边缘底部:5px;
}
.tabbedpage.tabbedpage标题>div.active{
颜色:#d81e05;
显示:块;
}
.tabbedpage.tabbedpage指示器{
位置:相对位置;
宽度:计算(100%/2);
高度:5px;
背景#d81e05;
左:0px;
边界半径:5px;
过渡:所有500ms的缓进缓出;
}
.tabbedpage.tabbedpage内容{
位置:相对位置;
高度:计算(100%-60px);
填充:10px 5px;
}
.tabbedpage.tabbedpage内容>div{
前-200%;
不透明度:0;
变换:比例(0.9);
过渡:不透明度500ms缓进缓出0ms,
转换500ms输入输出0ms;
}
.tabbedpage.tabbedpage内容>div.active{
顶部:0px;
不透明度:1;
变换:比例(1);
}

统计
用户管理
这是统计组
知识本身是一种美德,是一种美德,是一种美德,是一种美德,是一种美德

这里是sser管理部门 知识本身是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德


您正在使用
不透明度
隐藏
div
,这意味着
div
不会被隐藏,但它将
不可见
。因此
div
的空间将在那里

使用显示将删除动画

让我们玩位置,使用
位置:绝对
重叠
div
,并使用
不透明度
控制可见性

请参阅下面的代码

let tabHeader=document.getElementsByClassName(“tabbedpage header”)[0];
让tabIndicator=document.getElementsByCassName(“tabbedpage指示符”)[0];
让tabContent=document.getElementsByClassName(“tabbedpage内容”)[0];
设tabsPane=tabHeader.getElementsByTagName(“div”);
for(设i=0;i div{
宽度:计算(100%/2);
文本对齐:居中;
颜色:#888;
字号:600;
光标:指针;
字体大小:20px;
文本转换:大写;
大纲:无;
}
.tabbedpage.tabbedpage页眉>div>i{
显示:块;
边缘底部:5px;
}
.tabbedpage.tabbedpage标题>div.active{
颜色:#d81e05;
显示:块;
}
.tabbedpage.tabbedpage指示器{
位置:相对位置;
宽度:计算(100%/2);
高度:5px;
背景#d81e05;
左:0px;
边界半径:5px;
过渡:所有500ms的缓进缓出;
}
.tabbedpage.tabbedpage内容{
位置:相对位置;
高度:计算(100%-60px);
填充:10px 5px;
}
.tabbedpage.tabbedpage内容>div{
位置:绝对位置;
宽度:100%;
排名:0;
左:0;
不透明度:0;
变换:比例(0.9);
过渡:不透明度500ms缓进缓出0ms,
转换500ms输入输出0ms;
}
.tabbedpage.tabbedpage内容>div.active{
不透明度:1;
变换:比例(1);
}

统计
用户管理
这是统计组
知识本身是一种美德,是一种美德,是一种美德,是一种美德,是一种美德

这里是sser管理部门 知识本身是一种美德,是一种美德,是一种美德,是一种美德,是一种美德,是一种美德


是的,但现在动画不见了。我仍然想使用animation@A.Vreeswijk我更新了我的答案。请检查。现在我遇到了另一个问题xD,因为它是一个绝对布局,选项卡页面的内容通过我的页面的页脚?没有您的全部代码,我无法处理布局。您仍然可以控制溢出。