特定のオブジェクトをクリックするたびに他のオブジェクトを表示する方法

Question

メインページをクリックすると、他のオブジェクトが表示されます。メインページを残しておきたいのですが、クリックするたびに他のオブジェクトが1つずつ表示されるようにします。私は約5つのレイヤーを私の持っているindex.html私はちょうど私がメインページのオブジェクトをクリックすると、他のレイヤーが表示されますように各レイヤーに配置する必要があるコードを正確にはわかりません。で

Answer 1

すべての私はあなたがそれをクリックを検出したときに、それぞれ次の隠されたオブジェクトを表示することができる機能を実行し、イベントリスナーを追加することができ、他のオブジェクトが1

ずつを表示する]をクリック。

実施例：

var boxes = document.getElementsByTagName('div'); 
 
var boxNumber = 1; 
 

 
function revealBox() { 
 
    if (boxNumber < (boxes.length - 2)) { 
 
     boxes[boxNumber].classList.add('revealed'); 
 
     boxNumber++; 
 
    } 
 

 
    if (boxNumber < (boxes.length - 2)) { 
 
     boxes[0].textContent = 'Click me to reveal Box ' + boxNumber; 
 
    } 
 
} 
 

 
boxes[0].textContent += ' to reveal Box ' + boxNumber; 
 
boxes[0].addEventListener('click', revealBox, false);

div { 
 
display: none; 
 
width: 100px; 
 
height: 100px; 
 
font-size: 22px; 
 
text-align: center; 
 
background-color: rgb(163, 163, 163); 
 
vertical-align: top; 
 
} 
 

 
div:nth-of-type(1) { 
 
display: inline-block; 
 
color: rgb(255, 255, 255); 
 
background-color: rgb(255, 0, 0); 
 
cursor: pointer; 
 
} 
 

 
div.revealed { 
 
display: inline-block; 
 
}

<div>Click Me</div> 
 
<div>Box 1</div> 
 
<div>Box 2</div> 
 
<div>Box 3</div> 
 
<div>Box 4</div> 
 
<div>Box 5</div>