如何隐藏多个元素并仅显示每个容器中的一项

隐藏多个元素并仅显示每个容器中的一项，可以通过使用CSS和JavaScript来实现。以下是一种常见的实现方法：

HTML结构：创建多个容器，并在每个容器中放置需要显示的元素。例如，使用<div>元素作为容器，每个容器中包含需要显示的元素。

<div class="container">
  <div class="item">元素1</div>
  <div class="item">元素2</div>
  <div class="item">元素3</div>
</div>

<div class="container">
  <div class="item">元素4</div>
  <div class="item">元素5</div>
  <div class="item">元素6</div>
</div>

<!-- 添加更多容器和元素 -->

CSS样式：使用CSS将所有元素隐藏，并设置一个类来显示当前容器中的元素。

.container .item {
  display: none;
}

.container .item.active {
  display: block;
}

JavaScript交互：使用JavaScript来切换显示的元素。可以通过添加事件监听器来实现点击切换，或者使用定时器自动切换。

// 点击切换
var containers = document.querySelectorAll('.container');

containers.forEach(function(container) {
  var items = container.querySelectorAll('.item');
  
  container.addEventListener('click', function() {
    var activeItem = container.querySelector('.item.active');
    var nextItem = activeItem.nextElementSibling || items[0];
    
    activeItem.classList.remove('active');
    nextItem.classList.add('active');
  });
});

// 自动切换
var containers = document.querySelectorAll('.container');

containers.forEach(function(container) {
  var items = container.querySelectorAll('.item');
  var currentIndex = 0;
  
  setInterval(function() {
    var activeItem = container.querySelector('.item.active');
    var nextIndex = (currentIndex + 1) % items.length;
    var nextItem = items[nextIndex];
    
    activeItem.classList.remove('active');
    nextItem.classList.add('active');
    
    currentIndex = nextIndex;
  }, 2000); // 每2秒切换一次
});

通过以上步骤，就可以实现隐藏多个元素并仅显示每个容器中的一项。点击容器或者定时器触发的事件会切换当前显示的元素。根据实际需求，可以调整CSS样式和JavaScript交互的细节。

注意：以上代码仅为示例，实际应用中可能需要根据具体情况进行适当的修改和优化。