Div ???
Hallo Leute.
Ich habe 10 unsichtbare div's übereinanderliegen. Jedes soll nach dem Aufruf aus einer selectbox, angesprochen und sichtbar gemacht werde. Funktioniert bei jedem div auch einwandfrei.
Nun das Problem :
Bei jedem erneuten sichtbar machen / Aufruf eines neuen div's, soll das zuvor sichtbar gemachte, wieder unsichtbar werden.
Habe nach 6 Stunden, knobeln, aufgeben müssen.
Der hier verwendete Code
<html>
<head>
<style>
*{
magin:0;
padding:0;
}
select{
height:30px;
font-size:20px;
}
main{
margin:0 auto;
display:flex;
flex-wrap:wrap;
max-width:600px;
}
.box{
height:196px;
display:none;
width:196px;
border:2px solid black;
font-size:35px;
text-align:center;
line-height:100px;
}
.sichtbar{
display:block;
}
</style>
</head>
<body>
<label>
<select>
<option value="1">Box 1</option>
<option value="2">Box 2</option>
<option value="3">Box 3</option>
<option value="4">Box 4</option>
<option value="5">Box 5</option>
<option value="6">Box 6</option>
<option value="7">Box 7</option>
<option value="8">Box 8</option>
<option value="9">Box 9</option>
<option value="allon">Alle Boxen einblenden</option>
<option value="off">Alle Boxen ausblenden</option>
</select>
</label>
<main>
<div class="box" id="box1">Box1</div>
<div class="box" id="box2">Box2</div>
<div class="box" id="box3">Box3</div>
<div class="box" id="box4">Box4</div>
<div class="box" id="box5">Box5</div>
<div class="box" id="box6">Box6</div>
<div class="box" id="box7">Box7</div>
<div class="box" id="box8">Box8</div>
<div class="box" id="box9">Box9</div>
</main>
</body>
<script>
document.getElementsByTagName('select')[0].addEventListener('change',function(){
var val=this.value;
var box=document.querySelectorAll('.box');
box.forEach(function(el){
if(val=='allon'){
el.classList.add('sichtbar');
}
if(val=='off'){
el.classList.remove('sichtbar');
}
if(val!='allon' && val!='off'){
if(el.classList.contains('sichtbar')){
el.classList.remove('sichtbar');
}
}
})
if(val!='allon' && val!='off'){
document.getElementById('box'+this.value).classList.add('sichtbar');
}
})
</script>
</html>