Multi toggleclass
Toggleclass kennt jeder , nur hier im Beispiel werden 6 Farben nacheinander durch getoggelt
Der hier verwendete 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>