div-Elemente einblenden
Hallo,
Ich möchte über ein Dropdown das ausgewählte div-Objekt einblenden und die anderen 2 ausblenden.
Das Grundgerüst habe ich schon, nur weiß ich nicht, wie ich den Rest machen soll.
Der hier verwendete Code
<body translate="no" >
<style>
div{
height:100px;
position:relative;
width:100%;
font-size:80px;
border:2px solid black;
}
.off{
opacity:0;
transition:1s opacity;
}
.on{
opacity:1;
transition:1s opacity;
}
</style>
<select name="dropdown" id="dropdown">
<option value="">Auswahl</option>
<option value="1">div1</option>
<option value="2">div2</option>
<option value="3">div3</option>
<option value="0">Alles ausblenden</option>
<option value="4">Alles einblenden</option>
</select>
<div class="off" id="div1">
Das ist div1.
</div>
<div class="off" id="div1">
Das ist div2.
</div>
<div class="off" id="div3">
Das ist div3.
</div>
<script>
div=document.querySelectorAll('div');
document.getElementById('dropdown').addEventListener('change',function(r){
var numb=this.value;
if(numb==0){
div.forEach(function(e){
if(e.classList.contains('on')){
e.classList.remove('on');
e.classList.add('off')
}
})
}else if(numb==4){
div.forEach(function(e){
if(e.classList.contains('off')){
e.classList.remove('off');
e.classList.add('on')
}
})
}else{
div.forEach(function(e){
if(e.classList.contains('on')){
e.classList.remove('on');
e.classList.add('off')
}
if(div[numb-1].classList.contains('off')){
div[numb-1].classList.remove('off');
div[numb-1].classList.add('on')
}
})
}
})
</script>
</body>