css制作tab菜单

2026-02-12 14:45:01CSS

使用CSS制作Tab菜单

制作Tab菜单可以通过HTML和CSS结合实现，以下是几种常见的方法：

基础Tab菜单

HTML结构：

<div class="tab-container">
  <div class="tabs">
    <button class="tab active" data-tab="tab1">Tab 1</button>
    <button class="tab" data-tab="tab2">Tab 2</button>
    <button class="tab" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div id="tab1" class="content active">Content for Tab 1</div>
    <div id="tab2" class="content">Content for Tab 2</div>
    <div id="tab3" class="content">Content for Tab 3</div>
  </div>
</div>

CSS样式：

.tab-container {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  position: relative;
}

.tab.active {
  color: #007bff;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #007bff;
}

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

.content.active {
  display: block;
}

带悬停效果的Tab菜单

为Tab按钮添加悬停效果：

.tab:hover {
  background-color: #f5f5f5;
}

.tab:focus {
  outline: none;
}

响应式Tab菜单

针对小屏幕设备的响应式调整：

@media (max-width: 600px) {
  .tabs {
    flex-direction: column;
  }

  .tab {
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .tab.active::after {
    left: 0;
    bottom: 0;
    width: 3px;
    height: 100%;
  }
}

JavaScript交互功能

添加基本的Tab切换功能：

document.querySelectorAll('.tab').forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有active类
    document.querySelectorAll('.tab, .content').forEach(el => {
      el.classList.remove('active');
    });

    // 添加active类到当前tab和对应内容
    tab.classList.add('active');
    const tabId = tab.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});

圆角Tab菜单样式

创建视觉上更吸引人的圆角Tab：

css制作tab菜单

.tabs {
  background-color: #f8f9fa;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.tab {
  border-radius: 8px 8px 0 0;
  margin-right: 5px;
}

.content {
  border-radius: 0 0 8px 8px;
}

这些方法提供了从基础到进阶的Tab菜单实现方式，可以根据项目需求选择适合的方案或进行组合使用。