tab栏切换js代码

以下是一个简单的示例代码，用于实现基本的 tab 栏切换效果：

HTML 代码：

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>
</div>

<div id="tab1" class="tabcontent">
  <h2>Tab 1 content</h2>
  <p>Some text here...</p>
</div>

<div id="tab2" class="tabcontent">
  <h2>Tab 2 content</h2>
  <p>Some text here...</p>
</div>

<div id="tab3" class="tabcontent">
  <h2>Tab 3 content</h2>
  <p>Some text here...</p>
</div>

CSS 代码：

/* 隐藏所有 tab 内容 */
.tabcontent {
  display: none;
}

/* 将选中的 tab 显示出来 */
.tabcontent.show {
  display: block;
}

JavaScript 代码：

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  // 获取所有 tab 内容和 tab 按钮
  tabcontent = document.getElementsByClassName("tabcontent");
  tablinks = document.getElementsByClassName("tablinks");

  // 隐藏所有 tab 内容
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].className = tabcontent[i].className.replace(" show", "");
  }

  // 移除所有 tab 按钮的 active 样式
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // 显示当前选中的 tab 内容，并添加 active 样式到当前 tab 按钮
  document.getElementById(tabName).className += " show";
  evt.currentTarget.className += " active";
}

在这个例子中，我们首先隐藏了所有 tab 栏内容，然后为每个 tab 栏按钮添加了一个 onclick 事件处理程序，该程序调用 openTab() 函数并传递事件对象和 tab 名称作为参数。在 openTab() 函数内部，我们首先获取所有 tab 栏内容和按钮，然后遍历它们并隐藏所有 tab 内容和移除所有按钮的 active 样式。最后，我们为当前选中的 tab 内容添加 show 样式，并为当前 tab 按钮添加 active 样式。

你可以根据自己的需要修改 CSS 样式和 JavaScript 代码来实现不同的 tab 栏切换效果。