单击按钮时，循环切换div列表并切换可见性

是一种常见的前端开发需求，可以通过JavaScript来实现。以下是一个示例代码：

HTML部分：

<button onclick="toggleDiv()">切换列表</button>

<div id="div1" style="display: block;">内容1</div>
<div id="div2" style="display: none;">内容2</div>
<div id="div3" style="display: none;">内容3</div>

JavaScript部分：

var divList = ["div1", "div2", "div3"];
var currentIndex = 0;

function toggleDiv() {
  var currentDiv = document.getElementById(divList[currentIndex]);
  var nextIndex = (currentIndex + 1) % divList.length;
  var nextDiv = document.getElementById(divList[nextIndex]);
  
  currentDiv.style.display = "none";
  nextDiv.style.display = "block";
  
  currentIndex = nextIndex;
}

在上述代码中，我们首先定义了一个包含div的id的数组divList，以及一个当前显示div的索引currentIndex。toggleDiv函数用于切换div的可见性。通过getElementById方法获取当前显示的div和下一个要显示的div，并通过修改它们的style.display属性来切换可见性。currentIndex也会更新为下一个要显示的div的索引，以便下次切换时使用。

这种循环切换div列表并切换可见性的功能在实际开发中常用于轮播图、选项卡等场景。

腾讯云相关产品和产品介绍链接地址：