점진적으로 div 태그를 공개하는 방법

Question

내가 가진이 같은 form 태그 div 태그의 컬렉션 :

나는 사용자가 next, 다음 div 태그를 누를 때보다 눈에 보이는 지역에서만 div1을 표시 할

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

즉 div2이 표시됩니다.

어떻게하면됩니까?

다른 접근 방법에 대한 지식이별로 없지만 Javascript에 대한 지식이 있으므로 어떤 아이디어라도 감사 할 것입니다.

P. 가능한 경우 샘플 코드를 제공하십시오. 또한 클라이언트 쪽 스크립팅을 원합니다.

Answer 1

다음은 도움이 될만한 몇 가지 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"; 


} 

Answer 2

당신이 배열에 요소의 모든 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와, 또는를 사용하도록 표시/숨기기 코드를 조정할 수 있습니다.