Javascript 已完成的JS/HTML/CSS代码与Wordpress WPBakery冲突，无法实现

在codepen的帮助下，我得出了以下结论：

您可以在此处看到模型版本：

它工作完美，具有我需要的确切功能，唯一缺少的是我在这里模拟的移动显示器：

我的问题是：面包店是一场噩梦。我很久以前就买了这个主题，其中包括WPBakery，我一辈子都想不出如何将这个代码笔（或任何定制的东西）整合到网站中

我尝试过的插件： •定制CSS/JS-允许您向站点添加自己的CSS（与scss兼容）和javascript •页眉-页脚代码管理器-允许您在页眉中包含脚本，而无需处理PHP

我尝试使用自定义HTML元素和自定义JS元素，包括脚本和HTML，然后将HTML添加到样式表中

以下是当前的工作主页：

下面是我使用自定义html/js添加代码时发生的情况：

正如您在访问服务时所看到的，屏幕右侧的小li元素允许您从一页导航到另一页，最后将它们随机插入到我创建的代码笔中的ul中

一个未经教育的猜测：屏幕右侧用于li元素的JS与我分配给codepen UL的JS/类冲突，li元素允许你浏览主页

另一种修复方法：如果有人可以帮助我修改代码，使其具有点击功能，而不使用列表/无序列表，而是使用自定义类，那么它很可能不会与Wordpress/WPbakery冲突

如果有人能帮忙的话，这是我在网站上真正想要的唯一复杂的东西，但对我来说很重要。我愿意授权/付钱给某人来做这件事，我知道这只是知道WPBakery/Wordpress如何比我更好地工作的问题。我非常精通html/css，但js/php我是初学者

我会在upwork上发布这篇文章，但上次我发布时，有人在25小时时引用了我的项目，尽管我不是js/php高手，但我知道这是一个巨大的高估

$（“.tab_内容”）.hide（）；
$（“.tab_content:first”）.show（）；
$（“ul.tabs li”）。单击（函数（）{
$（“.tab_content”）.hide（）；
var activeTab=$（this.attr（“rel”）；
$（“#”+activeTab.fadeIn（）；
$（“ul.tabs li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“.tab\u drawer\u heading”）.removeClass（“d\u活动”）；
$（“.tab\u drawer\u heading[rel^=”+activeTab+“]”）addClass（“d\u active”）；
});
/*如果处于抽屉模式*/
$（“.tab\u drawer\u heading”）。单击（函数（）{
$（“.tab_content”）.hide（）；
var d_activeTab=$（this.attr（“rel”）；
$（“#”+d_activeTab）.fadeIn（）；
$（“.tab\u drawer\u heading”）.removeClass（“d\u活动”）；
$（此）.addClass（“d_活动”）；
$（“ul.tabs li”）.removeClass（“活动”）；
$（“ul.tabs li[rel^='”+d_activeTab+“']”）addClass（“active”）；
});
$（'ul.tabs li'）.last（）.addClass（“tab_last”）
/**********新CSS*/
ul.tabs li.active>img.img-inactive{
显示：无；
}
ul.tabs li.active>img.img-active{
显示：块；
}
ul.tabs li>img.img-active{
显示：无；
}
/**********新CSS*/
身体{
背景色：#333；
颜色：#fff；
}
氢{
文本转换：大写；
字体大小：3rem；
}
ul标签{
保证金：0；
填充：0；
浮动：左；
列表样式：无；
高度：232px；
边框底部：1px实心#333；
宽度：100%；
显示器：flex；
证明内容：中心；
}
ul.tabs img{
宽度：200px；
高度：200px；
}
李先生{
浮动：左；
保证金：0；
光标：指针；
填充：0px 0px；
利润率：0-20px；
高度：232px；
线高：31px；
颜色：#ccc；
溢出：隐藏；
位置：相对位置；
}
ul.tabs li.active{
颜色：#333；
显示：块；
}
.tab_容器{
填充顶部：75px；
明确：两者皆有；
浮动：左；
宽度：100%；
溢出：自动；
显示器：flex；
证明内容：中心；
文本对齐：居中；
}
.tab_内容{
填充：20px；
显示：无；
}
.制表符\u抽屉\u标题{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.标签{
显示：无；
}
.制表符\u抽屉\u标题{
背景色：#ccc；
颜色：#fff；
边框顶部：1px实心#333；
保证金：0；
填充：5px20px；
显示：块；
光标：指针；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
d_活动{
背景色：#666；
颜色：#fff；
}
}
#img2{
边缘顶部：90像素；
}














表1
表1内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。多涅克·梅特斯·奥古斯

表2
表2内容
Nunc dui velit，欧盟十字勋章，欧盟nisi。无排卵前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭

表3
表3内容
健康饮食。Etiam nec是饮食精英。佩伦特式的装饰，权杖式的装饰，前庭式的装饰

表4
表4内容
整数ultrices lacus位于amet lorem viverra consequat。智人之间的拉齐尼亚（Vivamus lacinia interdum sapien）非福西布斯（faucibus）。迈塞纳斯·比本杜姆（Maecenas bibendum）、奥特里斯·维韦拉（ultrices viverra）的莱克托斯（lectus）、麦格纳·埃古斯塔斯·麦格纳（Elite magna egestas magna）以及一位令人敬佩的毛里斯·贾斯托·内克·厄罗斯（mauris justo

表5
表5内容
整数ultrices lacus位于amet lorem viverra consequat。智人之间的拉齐尼亚（Vivamus lacinia interdum sapien）非福西布斯（faucibus）。迈塞纳斯·比本杜姆（Maecenas bibendum）、奥特里斯·维韦拉（ultrices viverra）的莱克托斯（lectus）、麦格纳·埃古斯塔斯·麦格纳（Elite magna egestas magna）以及一位令人敬佩的毛里斯·贾斯托·内克·厄罗斯（mauris justo

请删除“$”符号并替换为“jQuery”，同时更改类名t