如何在WordPress中实现点击数字气泡切换步骤描述的设计？

推荐适配插件（可自定义CSS调整） #

• Tabby Blocks：将选项卡按钮改造为圆形数字气泡，通过自定义CSS调整布局，让激活气泡居中，绑定对应步骤描述显示。
• WPBakery Page Builder：利用自带选项卡模块，把按钮样式改为气泡形态，用Flex布局配合自定义CSS控制激活项居中，监听切换事件完成内容联动。
• Elementor：使用选项卡组件，通过内置自定义CSS面板修改按钮为圆形数字，添加少量自定义JS实现激活气泡的居中偏移，适配性强。

自定义实现方案（精准匹配设计） #

如果插件无法满足需求，直接用HTML+CSS+JS手写是最灵活的方式，以下是核心代码示例：

HTML结构 #

<div class="step-container">
  <div class="step-bubbles">
    <button class="step-bubble active" data-step="1">1</button>
    <button class="step-bubble" data-step="2">2</button>
    <button class="step-bubble" data-step="3">3</button>
  </div>
  <div class="step-content">
    <div class="content-item active" data-step="1">步骤1的详细描述内容</div>
    <div class="content-item" data-step="2">步骤2的详细描述内容</div>
    <div class="content-item" data-step="3">步骤3的详细描述内容</div>
  </div>
</div>

CSS样式（匹配气泡与居中布局） #

.step-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.step-bubbles {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.step-bubble {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.step-bubble.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

.step-content .content-item {
  display: none;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
}

.step-content .content-item.active {
  display: block;
}

JS逻辑（点击切换+居中效果） #

const bubbles = document.querySelectorAll('.step-bubble');
const contents = document.querySelectorAll('.content-item');
const bubbleContainer = document.querySelector('.step-bubbles');

bubbles.forEach(bubble => {
  bubble.addEventListener('click', () => {
    // 重置所有激活状态
    bubbles.forEach(b => b.classList.remove('active'));
    contents.forEach(c => c.classList.remove('active'));
    
    // 设置当前激活项
    bubble.classList.add('active');
    const targetContent = document.querySelector(`.content-item[data-step="${bubble.dataset.step}"]`);
    targetContent.classList.add('active');
    
    // 计算偏移量，让激活气泡居中
    const bubbleOffset = bubble.getBoundingClientRect().left - bubbleContainer.getBoundingClientRect().left;
    const centerOffset = bubbleOffset + bubble.offsetWidth / 2 - bubbleContainer.offsetWidth / 2;
    bubbleContainer.style.transform = `translateX(-${centerOffset}px)`;
  });
});

你可以根据设计图调整CSS中的颜色、尺寸、间距等参数，完全匹配需求，不受插件功能限制。

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