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

<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>

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

.container .item {
  display: none;
}

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

// 点击切换
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秒切换一次
});