如何在Angular中用Bootstrap实现重叠切换按钮？

核心方案 #

基于Bootstrap的按钮组组件，配合自定义CSS实现按钮重叠效果，再通过简单JS逻辑完成内容切换。

完整代码实现 #

HTML结构

<!-- 重叠切换按钮组 -->
<div class="btn-group btn-overlap" role="group">
  <button type="button" class="btn btn-primary active" data-target="#previous">Previous</button>
  <button type="button" class="btn btn-primary" data-target="#upcoming">Upcoming</button>
</div>

<!-- 对应切换内容 -->
<div id="previous" class="content-block mt-3">
  <h3>Previous 内容区域</h3>
  <p>这里展示Previous标签对应的内容</p>
</div>
<div id="upcoming" class="content-block mt-3 d-none">
  <h3>Upcoming 内容区域</h3>
  <p>这里展示Upcoming标签对应的内容</p>
</div>

自定义CSS（实现重叠样式）

.btn-overlap .btn {
  position: relative;
  margin-left: -1px; /* 让按钮边缘重叠 */
  border-radius: 0; /* 去掉默认圆角，保证重叠处无缝 */
}
/* 给首尾按钮恢复对应圆角，保证整体美观 */
.btn-overlap .btn:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.btn-overlap .btn:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
/* 激活状态的按钮显示在最上层 */
.btn-overlap .btn.active {
  z-index: 1;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); /* 保留Bootstrap原生激活焦点效果 */
}

JS切换逻辑（原生JS实现）

document.querySelectorAll('.btn-overlap .btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 切换按钮激活状态
    document.querySelectorAll('.btn-overlap .btn').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
    
    // 切换对应内容显示
    document.querySelectorAll('.content-block').forEach(block => block.classList.add('d-none'));
    document.querySelector(this.dataset.target).classList.remove('d-none');
  });
});

关键说明 #

• 利用Bootstrap原生的btn-group做容器，避免额外布局复杂度
• 通过margin-left: -1px实现按钮重叠，配合z-index保证激活按钮在最上层
• 用Bootstrap的d-none类控制内容显示隐藏，通过data-target属性关联按钮和内容块，逻辑简洁易维护

内容的提问来源于stack exchange，提问作者majid khan