basti1012.bplaced.net

Toggleclass kennt jeder , nur hier im Beispiel werden 6 Farben nacheinander durch getoggelt

Code

                                    
                                <style>
  .trip { 
  display: none;
width: 200px;
height: 200px;
}

#eins {
display:block;
background: blue;
}
#zwei {
background: red;
}
#drei {
background: green;
}
#vier {
background:yellow;
}
#funf {
background:black;
}
#sechs {
background:orange;
}

  
  
</style>

<div id="main">
    <div id="eins" class="trip">div 1</div>
    <div id="zwei" class="trip">div 2</div>
    <div id="drei" class="trip">div 3</div>
    <div id="vier" class="trip">div 4</div>
    <div id="funf" class="trip">div 5</div>
    <div id="sechs" class="trip">div 6</div>
  
  
  
  
</div>



<script>
  divs=document.querySelectorAll('.trip');
divs.forEach((el)=>{
   el.addEventListener('click',function(){
         var jetzt=Array.from(divs).indexOf(this);
         var gleich=parseInt(jetzt)+1
         if(jetzt>=divs.length-1) null ? 1 : gleich=0
         divs[jetzt].style.display='none';
         divs[gleich].style.display='block';
   });
});
  
</script>