javascript - 从列表中一次显示一个元素/div

Question

我正在尝试使单个代码隐藏具有同一类的所有元素，但按 ID 显示一个元素。它现在的实现方式只是将 div 堆叠在一起。无论如何一次只显示一个div？

<script>
function CurtindoAlesadoDesktop() {
  var x = document.getElementById("curtindo-a-vida-alesado");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

使用中的链接：maninhoflix.com.br（仅限桌面）

标签： javascript

Answer 1

也许像下面这样？

function showIdAndHideOthers(idToShow) {
  const elementsToHide = document.getElementsByClassName('class-to-hide');
  const elementToShow = document.getElementById(idToShow);
  for (const el of elementsToHide) {
    el.style.display = 'none';
  }
  elementToShow.style.display = 'block';
}

或者，您可以使用两个 CSS 类，一个默认隐藏所有元素，另一个显示活动元素。然后，您可以跟踪最近显示的元素并简单地添加/删除一个类。

例如（CSS）：

.thing {
  display: none;
}

.thing.selected {
  display: block;
}

JS：

let lastElement;
function showIdAndHideOthers(idToShow) {
  const elementToShow = document.getElementById(idToShow);
  if (lastElement != null) {
    lastElement.classList.remove('selected');
  }
  elementToShow.classList.add('selected');
  lastElement = elementToShow;
}

编辑：第二个示例：https ://codepen.io/minism/pen/GRgGdPg