Elementor 自定义 Tab 切换效果教程：用容器轻松打造交互式内容展示

一、为什么要在 Elementor 中自定义 Tab 切换？

在使用 Elementor 搭建 WordPress 页面时，我们经常希望在有限的空间中展示多组内容，比如“产品详情 / 技术参数”、“服务介绍 / 客户案例”、“常见问题 / 解决方案”等。这种场景下，Tab（标签切换）效果 就成了完美选择。

虽然 Elementor 自带了 “标签” 小工具（Tabs Widget），但它的样式和结构往往限制较多，不容易与自定义布局完美融合。
如果你希望完全自由控制样式、布局、交互动效，使用 Elementor 容器（Container）+ 简单的 JS 脚本 来实现自定义 Tab 效果会是更灵活的做法。

二、实现思路概览

我们将页面分为两部分：

标题容器（tab-titles）
- 放置多个标题按钮，用于切换显示内容。
内容容器（tab-contents）
- 对应每个标题的内容部分。

当用户点击标题时，通过 JavaScript 控制对应的内容容器显示，其他内容隐藏。

三、Elementor 页面结构示例

在 Elementor 编辑器中，添加两个主要容器：

<div class="tab-titles">
  <h3 class="tab-title active">标题一</h3>
  <h3 class="tab-title">标题二</h3>
</div>

<div class="tab-contents">
  <div class="tab-content active">这里是内容一</div>
  <div class="tab-content">这里是内容二</div>
</div>

说明：

第一个容器放置多个标题，每个标题使用 .tab-title 类。
第二个容器放置多个内容区块，每个区块使用 .tab-content 类。
默认第一个标题和内容设置为 active 状态。

四、添加样式（CSS）

在 Elementor 的“自定义 CSS”中粘贴以下样式：

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

.tab-title {
  cursor: pointer;
  padding: 10px 20px;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.tab-title.active {
  border-bottom: 2px solid #000;
  font-weight: bold;
}

如果希望加上切换动画，可以在 .tab-content 中添加过渡效果：

.tab-content {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  display: none;
}
.tab-content.active {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

这样，当切换时内容会平滑淡入，视觉体验更自然。

五、添加交互逻辑（JavaScript）

在 Elementor 页面底部插入一个 “HTML” 小工具，粘贴以下脚本：

<script>
document.addEventListener("DOMContentLoaded", function() {
  const titles = document.querySelectorAll(".tab-title");
  const contents = document.querySelectorAll(".tab-content");

  titles.forEach((title, index) => {
    title.addEventListener("click", () => {
      // 清除所有 active 状态
      titles.forEach(t => t.classList.remove("active"));
      contents.forEach(c => c.classList.remove("active"));

      // 激活当前标题与对应内容
      title.classList.add("active");
      if (contents[index]) {
        contents[index].classList.add("active");
      }
    });
  });
});
</script>

这段代码的关键点是：