WPBakery标签页切换时控制外部特定类文本块显隐的CSS/JS求助

嘿，这个需求我帮很多人解决过，WPBakery的标签页默认只管内部面板的切换，要关联外部的文本块显示/隐藏，有两种靠谱的方案，我给你拆解清楚：

这种方法不管你的外部文本块放在页面哪个位置都能生效，步骤很清晰：

1. 先给外部文本块加标识类
   给需要切换显示的文本块分别加专属类和通用类，方便后续控制：

   <!-- 第一个标签页对应的外部文本 -->
   <div class="tab-external-content tab-external-1">这里是第一个标签页要显示的内容</div>
   <!-- 第二个标签页对应的外部文本 -->
   <div class="tab-external-content tab-external-2">这里是第二个标签页要显示的内容</div>
   

2. 默认隐藏所有外部文本块
   用CSS先把这些文本块藏起来，只在对应标签页激活时显示：

   .tab-external-content {
     display: none; /* 默认隐藏 */
   }
   .tab-external-content.active {
     display: block; /* 激活时显示 */
   }
   

3. 编写JS逻辑关联标签页切换
   我们可以监听标签页的点击事件，或者直接利用WPBakery自带的切换事件，这里用原生JS和jQuery版本都给你写了：

   原生JS版本（无需依赖jQuery） #

   document.addEventListener('DOMContentLoaded', function() {
     // 获取所有标签页链接和外部文本块
     const tabLinks = document.querySelectorAll('.vc_tta-tabs-list .vc_tta-tab a');
     const externalContents = document.querySelectorAll('.tab-external-content');
   
     // 页面加载完成后，默认激活第一个标签页时显示对应文本
     const activeTabHref = document.querySelector('.vc_tta-tab.vc_active a').getAttribute('href');
     if (activeTabHref === '#1521496635357-e8313acf-e8c2') {
       document.querySelector('.tab-external-1').classList.add('active');
     }
   
     // 给每个标签页绑定点击事件
     tabLinks.forEach(link => {
       link.addEventListener('click', function() {
         // 先隐藏所有外部文本块
         externalContents.forEach(content => content.classList.remove('active'));
         
         // 根据当前标签页的href匹配对应的文本块
         const currentHref = this.getAttribute('href');
         if (currentHref === '#1521496635357-e8313acf-e8c2') {
           document.querySelector('.tab-external-1').classList.add('active');
         } else if (currentHref === '#1521496635380-99d0c08b-67d8') {
           document.querySelector('.tab-external-2').classList.add('active');
         }
       });
     });
   });
   

   jQuery版本（适配WPBakery常用的jQuery环境） #

   jQuery(document).ready(function($) {
     // 初始化：默认显示对应文本块
     const activeTabHref = $('.vc_tta-tab.vc_active a').attr('href');
     if (activeTabHref === '#1521496635357-e8313acf-e8c2') {
       $('.tab-external-1').addClass('active');
     }
   
     // 监听标签页点击事件
     $('.vc_tta-tabs-list').on('click', '.vc_tta-tab a', function() {
       // 先清空所有激活状态
       $('.tab-external-content').removeClass('active');
       
       // 匹配当前标签页并激活对应文本块
       const currentHref = $(this).attr('href');
       if (currentHref === '#1521496635357-e8313acf-e8c2') {
         $('.tab-external-1').addClass('active');
       } else if (currentHref === '#1521496635380-99d0c08b-67d8') {
         $('.tab-external-2').addClass('active');
       }
     });
   });
   

如果你的外部文本块和标签页的.vc_tta-tabs-list是同级元素，可以用CSS的:has()选择器实现，但要注意这个选择器的浏览器兼容性（现代浏览器支持，旧版IE/Edge不支持）：

/* 默认隐藏所有外部文本块 */
.tab-external-content {
  display: none;
}

/* 当第一个标签页激活时，显示对应外部文本 */
.vc_tta-tabs-list:has(.vc_tta-tab:first-child.vc_active) ~ .tab-external-1 {
  display: block;
}

/* 当第二个标签页激活时，显示对应外部文本 */
.vc_tta-tabs-list:has(.vc_tta-tab:nth-child(2).vc_active) ~ .tab-external-2 {
  display: block;
}

这种方法不需要写JS，但局限性很大——必须保证文本块和标签列表是同级，而且浏览器版本不能太老，所以更推荐用JS方案。

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