黑马tab栏切换案例

黑马Tab栏切换案例通常是指在Web或软件开发中，使用JavaScript库如jQuery、React或Vue.js等构建的一个功能模块，它允许用户通过点击不同的选项卡来切换页面内容显示。这种设计常见于网站的导航栏或组件管理界面，可以提高用户体验和信息组织。

例如，在HTML结构上，可能会有多个`<li>`元素代表各个选项卡，每个元素都有对应的`<div>`作为内容区域。当用户点击某个选项卡，通过JavaScript控制相应的`<div>`的可见性和激活状态，隐藏其他选项卡的内容并显示当前选中的内容。

一个简单的示例可能是：

<ul class="nav">
  <li><a href="#tab1">选项卡1</a></li>
  <li><a href="#tab2">选项卡2</a></li>
  <!-- 更多选项卡... -->
</ul>

<div id="tab1" style="display:none;">内容1</div>
<div id="tab2" style="display:none;">内容2</div>
<!-- 更多内容区... -->

<script>
  var tabs = document.querySelectorAll('.nav a');
  tabs.forEach(tab => {
    tab.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认链接跳转
      var targetId = this.getAttribute('href').substring(1); // 获取目标ID
      var currentTabContent = document.querySelector('#currentTabContent');
      if (currentTabContent.id === targetId) return; // 当前已经是显示状态，不做处理

      // 隐藏所有内容
      Array.from(document.getElementsByClassName('tab-content')).forEach(content => content.style.display = 'none');

      // 显示选中的内容
      document.getElementById(targetId).style.display = 'block';
      document.getElementById('currentTabContent').classList.remove('active'); // 移除之前活跃的样式
      this.parentNode.classList.add('active'); // 添加新激活的样式
      currentTabContent = document.getElementById(targetId);
      currentTabContent.classList.add('active');
    });
  });
</script>