js 选项卡 双重for循环

JS选项卡是一种常见的网页交互效果，可以实现在同一个页面上切换显示不同内容的功能。双重for循环在JS选项卡中常用于遍历和操作多个选项卡和内容。

实现JS选项卡的一般步骤如下：
1. HTML结构：在HTML中创建选项卡的容器和对应的内容区域，使用相应的标签和类名进行标识。
2. CSS样式：使用CSS样式设置选项卡和内容区域的外观，如背景颜色、边框等。
3. JS代码：使用JS代码实现选项卡的切换效果。

下面是一个简单的JS选项卡实现示例：

HTML结构：

<div class="tab-container">
  <div class="tab" onclick="changeTab(0)">Tab 1</div>
  <div class="tab" onclick="changeTab(1)">Tab 2</div>
  <div class="tab" onclick="changeTab(2)">Tab 3</div>
</div>

<div class="content-container">
  <div class="content">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
</div>

CSS样式：

.tab {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.content {
  display: none;
  padding: 20px;
  background-color: #f5f5f5;
}

JS代码：

function changeTab(index) {
  var tabs = document.getElementsByClassName("tab");
  var contents = document.getElementsByClassName("content");

  // 隐藏所有内容
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = "none";
  }

  // 显示选中的内容
  contents[index].style.display = "block";

  // 切换选项卡样式
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].style.backgroundColor = "#ccc";
  }
  tabs[index].style.backgroundColor = "#f5f5f5";
}

在上述代码中，双重for循环用于遍历选项卡和内容，通过改变它们的显示状态和样式来实现选项卡的切换效果。