如何在卡片内添加标签栏？

<div class="card">
  <div class="tab-container">
    <!-- 标签栏 -->
    <ul class="tabs">
      <li class="active">标签1</li>
      <li>标签2</li>
      <li>标签3</li>
    </ul>
    <!-- 标签内容 -->
    <div class="tab-content">
      <div class="tab-panel active">
        <!-- 标签1的内容 -->
      </div>
      <div class="tab-panel">
        <!-- 标签2的内容 -->
      </div>
      <div class="tab-panel">
        <!-- 标签3的内容 -->
      </div>
    </div>
  </div>
</div>

.card {
  /* 卡片样式 */
}

.tab-container {
  /* 标签栏和标签内容容器样式 */
}

.tabs {
  /* 标签栏样式 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 5px;
}

.tabs li.active {
  background-color: #ff0000;
}

.tab-content .tab-panel {
  display: none;
}

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

document.addEventListener('DOMContentLoaded', function() {
  var tabs = document.querySelectorAll('.tabs li');
  var tabPanels = document.querySelectorAll('.tab-panel');

  function handleTabClick(event) {
    // 切换激活状态
    tabs.forEach(function(tab) {
      tab.classList.remove('active');
    });
    event.target.classList.add('active');

    // 切换对应的内容面板
    var targetTab = event.target.getAttribute('data-tab');
    tabPanels.forEach(function(panel) {
      if (panel.getAttribute('data-tab') === targetTab) {
        panel.classList.add('active');
      } else {
        panel.classList.remove('active');
      }
    });
  }

  tabs.forEach(function(tab) {
    tab.addEventListener('click', handleTabClick);
  });
});