当前位置：首页 > JavaScript

js 实现tab

2026-04-05 17:35:41JavaScript

实现 Tab 功能的方法

使用 JavaScript 实现 Tab 切换功能可以通过多种方式完成。以下是几种常见的方法：

方法一：使用 classList 切换样式

通过给不同 Tab 添加事件监听器，切换显示对应的内容区域。

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮和内容的 active 类
    document.querySelectorAll('.tab-button').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-content').forEach(content => {
      content.classList.remove('active');
    });

    // 添加当前按钮和内容的 active 类
    button.classList.add('active');
    const tabId = button.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});

HTML 结构示例：

<div class="tab-buttons">
  <button class="tab-button active" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
</div>

<div class="tab-contents">
  <div id="tab1" class="tab-content active">内容1</div>
  <div id="tab2" class="tab-content">内容2</div>
</div>

方法二：使用 display 属性控制显隐

通过改变元素的 display 属性来实现 Tab 切换。

function openTab(evt, tabName) {
  const tabContents = document.getElementsByClassName("tab-content");
  for (let i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }

  const tabButtons = document.getElementsByClassName("tab-button");
  for (let i = 0; i < tabButtons.length; i++) {
    tabButtons[i].className = tabButtons[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

方法三：使用 jQuery 简化实现

如果项目中使用了 jQuery，可以更简洁地实现 Tab 功能。

$('.tab-button').click(function() {
  $('.tab-button').removeClass('active');
  $(this).addClass('active');

  $('.tab-content').hide();
  $($(this).data('tab')).show();
});

方法四：使用 Vue/React 等框架实现

在 Vue 中可以使用 v-show 或 v-if 指令：

new Vue({
  el: '#app',
  data: {
    activeTab: 'tab1'
  },
  methods: {
    setActiveTab(tab) {
      this.activeTab = tab;
    }
  }
});

对应的 HTML：

<div id="app">
  <button @click="setActiveTab('tab1')">Tab 1</button>
  <button @click="setActiveTab('tab2')">Tab 2</button>

  <div v-show="activeTab === 'tab1'">内容1</div>
  <div v-show="activeTab === 'tab2'">内容2</div>
</div>

样式建议

配合 CSS 可以增强 Tab 的视觉效果：

js 实现tab

.tab-button {
  padding: 10px 20px;
  background: #f1f1f1;
  border: none;
  cursor: pointer;
}

.tab-button.active {
  background: #ddd;
  font-weight: bold;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}

.tab-content.active {
  display: block;
}