javascript - 不显示某些内容并阻止一个元素

Question

我想制作3个按钮，每个按钮将所有内容div设置为display: none，并根据您单击的按钮之一将内容div更改为display: block 。例如，如果我单击第二个按钮，它将仅显示第二个 div 内容。

function showPanel(id) {

  var elements = document.getElementsByClassName("content");

  for (let i = 0; i < elements.length; i++) {
    document.getElementById(i).style.display = "none";
  }

  document.getElementById(id).style.display = "block";
}

<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>

<div class="content">
  <div id="1" class="content">
    <p>TEST1</p>
  </div>
  <div id="2" class="content">
    <p class="other">TEST2</p>
  </div>
  <div id="3" class="content ">
    <p class="other">TEST3</p>
  </div>
</div>

Answer 1

您的代码中存在一些问题。首先，length 是一个属性，而不是一个方法，因此您不需要 () 后缀来调用它。其次，HTML 中没有 className 属性。这应该只是class。最后，父容器与您要隐藏的元素共享相同的类，因此所有子元素都会被隐藏，即使它们应用了 display: block。

纠正这些问题后，您的代码将如下所示:

function showPanel(id) {
  var elements = document.getElementsByClassName("panel");
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.display = "none";
  }
  document.getElementById(id).style.display = "block";
}

<button onclick="showPanel('p1')">test1</button>
<button onclick="showPanel('p2')">test2</button>
<button onclick="showPanel('p3')">test3</button>

<div class="content">
  <div id="p1" class="panel">
    <p>TEST1</p>
  </div>
  <div id="p2" class="panel">
    <p class="other">TEST2</p>
  </div>
  <div id="p3" class="panel">
    <p class="other">TEST3</p>
  </div>
</div>

但是值得注意的是，使用 onX 属性已经过时并且不是一个好的做法。更好的解决方案是使用不显眼的事件处理程序，并通过元素上放置的 data 属性向事件处理程序提供自定义元数据。

逻辑的改进版本如下所示:

let buttons = document.querySelectorAll('button');
let panels = document.querySelectorAll('.panel');

buttons.forEach(button => {
  button.addEventListener('click', e => {
    panels.forEach(panel => {
      panel.style.display = panel.id === e.target.dataset.panel ? 'block' : 'none';
    });
  }); 
});

<button data-panel="1">test1</button>
<button data-panel="2">test2</button>
<button data-panel="3">test3</button>

<div class="content">
  <div id="1" class="panel">
    <p>TEST1</p>
  </div>
  <div id="2" class="panel">
    <p class="other">TEST2</p>
  </div>
  <div id="3" class="panel">
    <p class="other">TEST3</p>
  </div>
</div>