隱藏一個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？

回答

相關問題