WordPress Elementor Pro实现双按钮点击显示对应内容的方法

首先明确：你之前找的「双按钮、汉堡面板设置入口」没有独立的原生控件，这个交互是通过Elementor自带的交互绑定、显示/隐藏逻辑实现的，分3种适配不同场景的方案，无需额外插件：

方案1：Tabs组件改造为按钮组（最适合2-3个固定按钮、按钮紧邻对应内容的场景） #

这就是你听说的「双按钮」实现逻辑，不需要单独拖两个按钮组件：

• 从左侧组件库拖拽「标签页（Tabs）」组件到编辑区
• 在「内容-标签」设置栏，把默认标签替换为你需要的按钮文字（比如「产品参数」「常见问题」），每个标签对应的内容区填入需要匹配展示的内容
• 切换到「样式」设置栏调整成按钮样式：
  • 选中「标签项」分组，调整内边距、圆角、背景色，和普通按钮视觉保持一致
  • 关闭标签默认的分割线、底部边框，把标签布局设为横向等距排列
  • 单独设置选中状态的背景色、文字色，模拟按钮点击的高亮效果
• 该组件自带点击切换逻辑，无需额外设置，即可实现点击对应按钮显示匹配内容

方案2：按钮触发器+容器显示隐藏（适合按钮和内容块分离、跨区域切换的场景） #

如果你的切换按钮放在顶部导航、侧边栏等离内容块很远的位置，用这个方法：

• 把每一块需要切换显示的内容用「容器（Container）」包裹，在每个容器的「高级-CSS ID」栏填写唯一标识，比如content_product、content_faq（注意：ID不要以数字开头，不要带空格/特殊字符）
• 除了默认初始展示的内容容器，给其余所有容器在「高级-CSS类」栏填入elementor-hidden，这是Elementor自带的全局隐藏类，可直接将元素设为不可见，无需自定义CSS
• 拖拽需要的按钮组件到对应位置，逐个绑定触发逻辑：
  • 选中按钮，在按钮的「内容-链接」设置里，把链接类型从默认的「URL」切换为「显示/隐藏」
  • 在「目标元素」栏填入需要显示的内容容器ID，格式为#对应ID（比如点击展示产品内容的按钮，就填#content_product）
  • 在「要隐藏的元素」栏填入其余所有内容容器的ID，用英文逗号分隔
• 逻辑效果：点击对应按钮，自动将绑定的内容块设为可见，其余内容块自动隐藏

方案3：导航菜单/汉堡面板锚点跳转（适合单页网站、点击跳转定位到对应内容区块的场景） #

这就是你听说的「导航菜单、汉堡面板」的实现逻辑：

• 同样把每个需要定位的内容块用容器包裹，在「高级-CSS ID」栏填好锚点标识
• 从组件库拖入「导航菜单」组件，将布局设置为对应桌面/移动端尺寸的汉堡面板样式
• 给每个菜单项设置自定义链接，直接填入对应内容块的锚点（比如对应关于板块的菜单项，链接填#about）
• 该组件自带汉堡面板的默认收起逻辑，点击菜单项后自动收起面板，页面平滑滚动到匹配的内容区块位置

常见踩坑提醒 #

• 不要加载第三方插件实现该功能，以上逻辑全部为Elementor Pro原生能力
• 设置CSS ID/类时，不要和其他页面元素的ID重复，避免出现显示错乱
• 如果你用的是旧版Elementor（无容器组件），可以用「区块（Section）」替代容器完成同样的设置

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