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

我有两个divs叫#loading和一个叫#main;隐藏一个div并显示另一个div？

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

我试图实现是使用JavaScript，显示#loading五秒钟，然后后五秒隐藏#loading股利和显示#main股利。 #main div是默认隐藏的，一旦#loading div被隐藏，#main div会显示。

我假设实现这将是CSS和JavaScript的混合;希望你明白我想要达到的目标，并且可以帮助我完成我想要实现的目标。

谢谢。

来源

2016-11-08 Lewis Day

你可以做'removeClass（）'函数。 – claudios

这应该持续发生吗？ – Geeky

@Geeky只是在页面加载:) –

你的CSS是：

#main { 
    display:none; 
}

的JS是：

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

来源

2016-11-08 00:59:29 Derek

这里是否有语法错误？在你的结束行上有两个'}'，当我尝试使用它时它不起作用？ –

是的，有..编辑 – Derek

谢谢你的编辑真的很感激它 –

也许这可以帮助你在不使用CSS的。只有纯粹的Jquery。

$("#loading").show(); 
 
$("#main").hide(); 
 
setTimeout(function() { 
 
    $("#loading").hide(); 
 
    $("#main").show() 
 
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="loading">loading here..</div> 
 
<div id="main" class="hidden">This is main content</div>

来源

2016-11-08 01:03:07 claudios

使用的setTimeout。

window.onload = function() { 
 
    setTimeout(function() { 
 

 
    document.getElementById("loading").style.display = "none"; 
 

 
    document.getElementById("main").style.display = "block"; 
 
    }, 5*1000); 
 
}

#main { 
 
    display: none; 
 
}

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

希望这有助于

来源

2016-11-08 01:03:25 Geeky

只是好奇，为什么你有'＃加载'在CSS中，如果你没有样式添加？ – NewToJS

不需要...我们可以把它关掉 – Geeky

我知道这是不需要的，这就是为什么我好奇你为什么在那里：p – NewToJS

function loading(dur) { 
    if (window.busy) {return;} 
    document.getElementById('loading').style.display = "block"; 
    document.getElementById('main').style.display = "none"; 
    window.busy = setTimeout(function() { 
    document.getElementById('loading').style.display = "none"; 
    document.getElementById('main').style.display = "block"; 
    window.busy = 0; 
    }, dur); 
} 

loading(5000);

来源

2016-11-08 01:10:30

本人来说我会避免使用ID的位置，因为他们polute全球。

可以很好地与CSS和类在这里做..

var holder = document.querySelector('.holder'); 
 
setTimeout(function() { 
 
    holder.classList.remove('isloading'); 
 
}, 5000);

.loading { 
 
    display: none; 
 
} 
 
div.isloading .loading { 
 
    display: block; 
 
} 
 

 
.main { 
 
    display: none; 
 
} 
 
div:not(.isloading) .main { 
 
    display: block; 
 
}

<div class="holder isloading"> 
 
    <div class="loading">Loading</div> 
 
    <div class="main">Main</div> 
 
</div>

来源

2016-11-08 01:10:56 Keith

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

回答

相关问题