如何逐步揭示div標籤

我的div標籤在form標籤，這樣的集合：如何逐步揭示div標籤

<form ...> 
    <div id="div1"> ... </div> 
    <div id="div2"> ... </div> 
    ... 
    ... 
</form>

我只想div1在當用戶按下next，未來div標籤比可見光區域顯示即顯示div2，依此類推。

我該如何做到這一點？

我對可用的不同方法沒有太多的知識，但我對Javascript有一些瞭解，所以任何想法都將被讚賞。

P.S.請提供示例代碼，如果可能的話，我也想要客戶端腳本。

來源

2012-05-07 j4m4l

您是否僅限於使用簡單的JavaScript，或者像jQuery這樣的框架可以接受解決方案？另外，你是想要動態加載任何內容，還是每個'div'的完整內容都可以在初始頁面上加載？ –

@GuthMD不，我不限於任何框架，也將全部內容加載到初始頁面。 – j4m4l

下面提供了很好的解決方案。如果你想添加一些轉換效果，那麼我會推薦jQuery或類似的東西，因爲腳本可能會非常複雜，否則。 –

這裏有一些JavaScript和HTML演示可能有所幫助。遞增當前整數。你也可以用 - 退回去。有很多方法可以做到這一點。這只是我想到的一個。

<img src="mynextbutton.jpg" onclick="showNext()" /> 
<form ...> 
    <div id="Div0" style="display:inherit;"> ... </div> 
    <div id="Div1" style="display:none;"> ... </div> 
    <div id="Div2" style="display:none;"> ... </div> 
    ... 
    ... 
</form> 

//--------------------------------------------------- 

var currentDiv = 0; 
function showNext() 
{ 
    document.getElementById("Div"+currentDiv).style.display = "none"; 
    currentDiv ++; 
    document.getElementById("Div"+currentDiv).style.display = "ihherit"; 


}

來源

2012-05-07 19:36:41 FlavorScape

如果你把所有的元素的ID到一個數組，然後用它來獲取下一個項目，你可以刪除的ID編號確定它們旋轉的順序的依賴，同時也防止他們需要遵循這種嚴格的格式。

//add all element IDs to this array 
var elements = ["firstElementID","div2","someConentsID","lastElementID"]; 
var currentIndex = 0; 

//ensure that the first item is visible at the start. 

function next() 
{ 
    //hide current item. 
    document.getElementById(elements[currentIndex]).Style = "display:none"; 
    //move up the current index by one, wrapping so as to stay within array bounds. 
    currentIndex = (currentIndex + 1) % elements.length; 
    //show the new current item. 
    document.getElementById(elements[currentIndex]).Style = "display:inline"; 
}

您可以調整顯示/隱藏代碼以使用JQuery或任何其他您想要的機制。

來源

2012-05-07 19:53:43 Servy

如何逐步揭示div標籤

回答

相關問題