当前位置：首页 > JavaScript

js实现标签页

2026-04-07 08:15:48JavaScript

实现标签页的基本思路

使用HTML、CSS和JavaScript可以创建一个交互式标签页。HTML负责结构，CSS负责样式，JavaScript处理点击事件和内容切换。

HTML结构

创建一个包含标签按钮和内容区域的容器。标签按钮通常使用无序列表实现，内容区域包含与每个标签对应的内容块。

<div class="tabs">
  <ul class="tab-nav">
    <li><a href="#" class="active">标签1</a></li>
    <li><a href="#">标签2</a></li>
    <li><a href="#">标签3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">内容1</div>
    <div class="tab-pane">内容2</div>
    <div class="tab-pane">内容3</div>
  </div>
</div>

CSS样式

为标签页添加基本样式，包括标签按钮的排列、激活状态和内容区域的显示控制。

.tab-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.tab-nav li a {
  padding: 10px 15px;
  text-decoration: none;
  background: #eee;
  color: #333;
  display: block;
}

.tab-nav li a.active {
  background: #fff;
  border-bottom: 2px solid #333;
}

.tab-content {
  border: 1px solid #ddd;
  padding: 15px;
}

.tab-pane {
  display: none;
}

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

JavaScript逻辑

通过JavaScript监听标签按钮的点击事件，切换对应的内容显示。

document.addEventListener('DOMContentLoaded', function() {
  const tabLinks = document.querySelectorAll('.tab-nav a');

  tabLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();

      // 移除所有标签和内容的active类
      document.querySelectorAll('.tab-nav a').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active'));

      // 添加active类到当前点击的标签和对应的内容
      this.classList.add('active');
      const tabId = this.getAttribute('href');
      const tabPane = document.querySelector(`.tab-pane:nth-child(${Array.from(tabLinks).indexOf(this) + 1})`);
      tabPane.classList.add('active');
    });
  });
});

动态添加标签页

如果需要动态添加标签页，可以通过JavaScript操作DOM来实现。

function addTab(title, content) {
  const tabNav = document.querySelector('.tab-nav');
  const tabContent = document.querySelector('.tab-content');

  // 创建新的标签按钮
  const newTabLink = document.createElement('li');
  newTabLink.innerHTML = `<a href="#">${title}</a>`;
  tabNav.appendChild(newTabLink);

  // 创建新的内容区域
  const newTabPane = document.createElement('div');
  newTabPane.classList.add('tab-pane');
  newTabPane.textContent = content;
  tabContent.appendChild(newTabPane);

  // 为新标签添加点击事件
  newTabLink.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();

    document.querySelectorAll('.tab-nav a').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active'));

    this.classList.add('active');
    const tabPane = document.querySelectorAll('.tab-pane')[Array.from(tabNav.children).indexOf(newTabLink)];
    tabPane.classList.add('active');
  });
}

响应式设计

通过媒体查询确保标签页在不同设备上显示良好。

@media (max-width: 768px) {
  .tab-nav {
    flex-direction: column;
  }

  .tab-nav li a {
    border-bottom: 1px solid #ddd;
  }

  .tab-nav li a.active {
    border-bottom: 2px solid #333;
  }
}