Wordpress Visual Composer中如何用JS为同class Toggle标签设置唯一ID

第一步：通过JS为每个标签生成唯一专属标识 #

在无法直接编辑页面源码的前提下，可在页面DOM加载完成后，通过JS遍历所有Visual Composer生成的同类型toggle标签，按页面排列顺序给每个标签绑定独立的类名，作为CSS匹配的专属标识，全程不会破坏VC自带的toggle切换交互。
对应JS代码：

// 等待页面DOM元素全部加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有Visual Composer生成的toggle标签
  const allToggleTabs = document.querySelectorAll('a.vce-toggle-container-tab-title');
  // 遍历标签列表，按顺序添加专属类
  allToggleTabs.forEach((tabElement, index) => {
    tabElement.classList.add(`custom-toggle-tab-${index + 1}`);
  });
});

说明：

• 这段逻辑不需要手动对应标签和类名的关系，你后续在Visual Composer里新增、调整toggle标签顺序后，脚本会自动按页面上的排列顺序分配专属类：第一个展示的标签会绑定custom-toggle-tab-1类，第二个绑定custom-toggle-tab-2，以此类推
• 如果你更倾向用ID作为匹配标识，只需把添加类的那行代码替换为tabElement.id = custom-toggle-tab-${index + 1};即可，效果一致；类名方案不会和VC自动生成的元素ID规则冲突，兼容性更好

第二步：拆分CSS规则，为每个标签单独配置背景 #

把之前写的全局样式按公共属性、专属属性拆分，避免统一的背景图覆盖独立配置：

1. 保留所有标签通用的公共样式（比如背景定位、尺寸、平铺规则等）
2. 针对JS生成的专属类，单独给每个标签配置对应的背景图
   对应CSS示例：

/* 所有toggle标签的公共样式 */
a.vce-toggle-container-tab-title {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
}

/* 第1个标签专属背景 */
a.custom-toggle-tab-1 {
    background-image: url("替换为你需要的第一张背景图地址") !important;
}

/* 第2个标签专属背景 */
a.custom-toggle-tab-2 {
    background-image: url("替换为你需要的第二张背景图地址") !important;
}

实操注意事项 #

• JS脚本无需嵌入HTML源码，可直接放入WordPress主题自定义面板的「额外代码」区块，或使用轻量自定义代码插件注入，不会改动Visual Composer的原有页面结构
• 如果页面存在多个独立的toggle容器，可在JS选择器中先定位到具体的toggle容器根节点，再遍历容器内部的标签，避免不同容器的标签被误匹配统一类
• 公共样式规则中不要写死background-image属性，否则会覆盖后续专属类的背景配置

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