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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!