当前位置：首页 > JavaScript

js实现tab栏目

2026-02-03 01:55:38JavaScript

使用HTML和CSS构建基础结构

HTML部分需要创建tab的标题和内容区域，通常使用无序列表<ul>和<div>实现。CSS负责样式布局，如高亮当前选中的tab。

<div class="tab-container">
  <ul class="tab-header">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="content-item active">Content 1</div>
    <div class="content-item">Content 2</div>
    <div class="content-item">Content 3</div>
  </div>
</div>

.tab-header {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-header li {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #f1f1f1;
}
.tab-header li.active {
  background: #fff;
  border-bottom: 1px solid #fff;
}
.tab-content .content-item {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  border-top: none;
}
.tab-content .content-item.active {
  display: block;
}

通过JavaScript添加交互逻辑

使用事件监听实现点击切换功能。核心逻辑是移除所有元素的active类，再为当前点击的元素添加该类。

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab-header li');
  const contents = document.querySelectorAll('.content-item');

  tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      // 移除所有active类
      tabs.forEach(t => t.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      // 添加当前active类
      tab.classList.add('active');
      contents[index].classList.add('active');
    });
  });
});

动态生成Tab内容

若需从数据动态生成tab，可通过遍历数组创建DOM元素。

const tabData = [
  { title: 'News', content: 'Latest updates...' },
  { title: 'Weather', content: 'Forecast details...' }
];

function renderTabs() {
  const header = document.querySelector('.tab-header');
  const content = document.querySelector('.tab-content');

  tabData.forEach((item, i) => {
    // 创建标题
    const li = document.createElement('li');
    li.textContent = item.title;
    if (i === 0) li.classList.add('active');
    header.appendChild(li);

    // 创建内容
    const div = document.createElement('div');
    div.textContent = item.content;
    div.classList.add('content-item');
    if (i === 0) div.classList.add('active');
    content.appendChild(div);
  });
}

支持URL哈希定位

通过监听hashchange事件实现URL哈希切换tab，增强用户体验。

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.substr(1);
  const targetTab = document.querySelector(`[data-tab="${hash}"]`);
  if (targetTab) targetTab.click();
});

// 修改点击事件，同步哈希
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    window.location.hash = tab.dataset.tab;
  });
});

js实现tab栏目