js(JavaScript)实现TAB标签切换效果的简单实例

以下是一个简单的JavaScript实现TAB标签切换效果的示例。在这个示例中，我们将使用HTML来创建几个标签（tab）和对应的内容区域（content）。然后，使用JavaScript来监听标签的点击事件，并根据点击的标签显示相应的内容区域。

HTML部分：

<div class="tabs">
  <button class="tab-link" onclick="openTab(event, 'Tab1')">Tab 1</button>
  <button class="tab-link" onclick="openTab(event, 'Tab2')">Tab 2</button>
  <button class="tab-link" onclick="openTab(event, 'Tab3')">Tab 3</button>
</div>

<div id="Tab1" class="tab-content">
  <p>内容 1...</p>
</div>

<div id="Tab2" class="tab-content" style="display:none;">
  <p>内容 2...</p>
</div>

<div id="Tab3" class="tab-content" style="display:none;">
  <p>内容 3...</p>
</div>

JavaScript部分：

function openTab(evt, tabName) {
  // 获取所有元素中类名为tab-content的元素
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab-content");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  // 获取所有元素中类名为tab-link的元素
  tablinks = document.getElementsByClassName("tab-link");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  // 显示当前tab的内容，并设置tab按钮为激活状态
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

注意：在这个示例中，为了简化，我没有直接在CSS中设置`.active`类的样式，因为我们的主要焦点是JavaScript实现。你可以根据需要添加CSS样式来进一步美化TAB标签的外观。

此外，这个示例使用了内联的`onclick`事件处理器，这是为了简化代码。在生产环境中，你可能会考虑使用`addEventListener`来更灵活地处理事件。

现在，当你点击任何一个TAB标签时，对应的内容区域就会显示出来，而其他内容区域则会被隐藏。