简体   繁体   中英

Change style.display on multiple objects through one button JAVASCRIPT

im trying to change the display attribute of multiple objects through one button, using event listener. It works fine if I just want to change the display on one object at a time but not all three..

any ideas?

http://jsfiddle.net/rn9vrwyg/

var ruta1 = document.getElementById('ruta1')
var ruta2 = document.getElementById('ruta2')
var ruta3 = document.getElementById('ruta3')

document.getElementById('knapp1').addEventListener("click", function(){
ruta1.style.display = "block";
ruta2.style.display = "none";
ruta3.style.display = "none";

});

document.getElementById('knapp2').addEventListener("click", function(){
ruta2.style.display = "block";  
ruta1.style.display = "none";
ruta3.style.display = "none";

});

document.getElementById('knapp3').addEventListener("click", function(){
ruta3.style.display = "block";
ruta1.style.display = "none";
ruta2.style.display = "none";


});
<div id="ruta1">
      <p>Informationbox #1</p>
    </div>
        <div id="ruta2">
      <p>Informationbox #2</p>
    </div>
        <div id="ruta3">
      <p>Informationbox #3</p>
    </div>

These div's and p tags are not closed properly. Close those tags then its working as expected.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM