Javascript 隐藏一个div并显示另一个div？

我有两个名为“加载”的

div

，还有一个名为“主”

<div id="loading"></div>
<div id="main"></div>

我试图通过使用javascript实现的是，显示

#loading

五秒钟，然后在五秒钟后隐藏

#loading

div并显示

#main

div。默认情况下，

#main

div是隐藏的，一旦

#loading

div被隐藏，就会显示

#main

div

我假设要实现这一点，需要css和javascript的混合；希望你能理解我想要实现的目标，并能帮助我实现我想要实现的目标

谢谢。

您的css将是：

#main {
    display:none;
}

setTimeout(function() {
    document.getElementById('main').style.display = 'block';
    document.getElementById('loading').style.display = 'none';
}, 5000);

JS将是：

#main {
    display:none;
}

setTimeout(function() {
    document.getElementById('main').style.display = 'block';
    document.getElementById('loading').style.display = 'none';
}, 5000);

---

也许这可以在不使用CSS的情况下帮助您。只有纯Jquery

$（“#加载”）.show（）；
$（“#main”）.hide（）；
setTimeout（函数（）{
$（“#加载”）.hide（）；
$（“#main”）.show（）
}, 5000);

在这里装货。。
这是主要内容
使用设置超时


window.onload=function（）{
setTimeout（函数（）{
document.getElementById（“加载”）.style.display=“无”；
document.getElementById（“main”）.style.display=“block”；
}, 5*1000);
}
#主{
显示：无；
}
加载
main
就个人而言，我会避免在这里使用ID，因为它们会污染全局

使用CSS和类可以很好地做到这一点


var holder=document.querySelector（'.holder'）；
setTimeout（函数（）{
holder.classList.remove（'isload'）；
}, 5000);
。正在加载{
显示：无；
}
分区isloading。正在加载{
显示：块；
}
梅因先生{
显示：无；
}
div:not（.isloading）.main{
显示：块；
}

加载
主要
您可以在这里执行
removeClass（）
函数。这种情况应该会持续发生吗？@Geeky只在页面加载时执行一次：）这里有语法错误吗？在你的结束行中有两个
}
，当我尝试使用它时，它不起作用？只是好奇，如果你没有样式可添加，为什么你要在CSS中加载
？我知道它不需要，这就是为什么我好奇为什么你在那里：只需五秒钟而不是一分钟！。。读它5分钟..修改了代码现在应该可以工作了