通过一个按钮JAVASCRIPT更改style.display在多个对象上的显示

Change style.display on multiple objects through one button JAVASCRIPT

本文关键字:display 对象 style 显示 JAVASCRIPT 一个 按钮 更改      更新时间:2023-09-26

im试图使用事件监听器通过一个按钮更改多个对象的显示属性。如果我只想一次更改一个对象的显示,但不想同时更改所有三个对象,则效果良好。。

有什么想法吗?

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>

这些div和p标记没有正确关闭。关闭这些标签,然后按预期工作。