Wie jedes Mal, wenn ein bestimmtes Objekt geklickt wird, andere Objekte angezeigt werden

Question

So habe ich meine Hauptseite mit dem Objekt gemacht, auf das ich klicken möchte, das die anderen Objekte erscheinen lassen wird. Ich möchte, dass die Hauptseite bleibt, aber mit jedem Klick möchte ich andere Objekte nacheinander anzeigen lassen. Ich habe ungefähr 5 Schichten von meiner index.html gemacht Ich bin nur nicht genau sicher, welchen Code ich in jede Ebene einfügen muss, so dass, wenn ich auf das Objekt der Hauptseite klicke, werden die anderen Ebenen angezeigt.

Answer 1

Mit jedem Klick ich andere Objekte wollen ein erscheinen von einem

Sie können einen Ereignis-Listener hinzufügen, die, wann immer es einen Klick erkennt, eine Funktion ausführt, die jeweils nächste versteckte Objekt ermöglicht erscheinen.

Arbeitsbeispiel:

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>