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

【问题标题】：Finished JS / HTML / CSS Code Conflicting with Wordpress WPBakery, Cannot Implement完成的 JS/HTML/CSS 代码与 Wordpress WPBakery 冲突，无法实现
【发布时间】：2019-07-06 18:47:28
【问题描述】：

在 codepen 的帮助下，我想出了以下内容： https://codepen.io/Lancewalker/pen/zepjXr

您可以在此处查看样机版本：https://i.gyazo.com/88a0d6815253cbca8981a276bb937673.png

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

http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/LWD-FinalMockup.png

我的问题：WPBakery 是一场噩梦。我很久以前就购买了这个主题，其中包括 WPBakery，但我终其一生都无法弄清楚如何将这个 codepen（或任何自定义内容）合并到网站中。

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

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

这是当前的工作主页： http://www.lancewalkerdesigns.com/

当我使用自定义 html / js 添加代码时，会发生以下情况： http://www.lancewalkerdesigns.com/home-page/

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

一个未受教育的猜测：用于屏幕右侧的 li 元素的 JS 与我分配给我的 codepen UL 的 JS / 类有冲突。

另一种解决方法：如果有人可以帮助我修改代码以在不使用列表/无序列表而是使用自定义类的情况下实现点击功能，那么它就有可能不会与 Wordpress / WPbakery 冲突

如果有人可以提供帮助，这是我在网站上真正想要的唯一复杂的东西，但它对我很重要。我愿意授予访问权限/付费某人这样做，我知道这只是知道 WPBakery / Wordpress 如何比我更好地工作的问题。我非常精通html / css，但js / php我是初学者。

我会在 upwork 上发布这个，但上次我这样做时有人在 25 小时内引用了我的项目，即使我不是 js / php 得心应手，我知道这是一个巨大的高估。

$(".tab_content").hide();
$(".tab_content:first").show();

$("ul.tabs li").click(function() {

  $(".tab_content").hide();
  var activeTab = $(this).attr("rel");
  $("#" + activeTab).fadeIn();

  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");

});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {

  $(".tab_content").hide();
  var d_activeTab = $(this).attr("rel");
  $("#" + d_activeTab).fadeIn();

  $(".tab_drawer_heading").removeClass("d_active");
  $(this).addClass("d_active");

  $("ul.tabs li").removeClass("active");
  $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
});

$('ul.tabs li').last().addClass("tab_last");

/*************New CSS*/

ul.tabs li.active>img.img-inactive {
  display: none;
}

ul.tabs li.active>img.img-active {
  display: block;
}

ul.tabs li>img.img-active {
  display: none;
}


/**********New CSS*/

body {
  background-color: #333;
  color: #fff;
}

h2 {
  text-transform: uppercase;
  font-size: 3rem;
}

ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 232px;
  border-bottom: 1px solid #333;
  width: 100%;
  display: flex;
  justify-content: center;
}

ul.tabs img {
  width: 200px;
  height: 200px;
}

ul.tabs li {
  float: left;
  margin: 0;
  cursor: pointer;
  padding: 0px 0px;
  margin: 0 -20px;
  height: 232px;
  line-height: 31px;
  color: #ccc;
  overflow: hidden;
  position: relative;
}

ul.tabs li.active {
  color: #333;
  display: block;
}

.tab_container {
  padding-top: 75px;
  clear: both;
  float: left;
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  text-align: center;
}

.tab_content {
  padding: 20px;
  display: none;
}

.tab_drawer_heading {
  display: none;
}

@media screen and (max-width: 480px) {
  .tabs {
    display: none;
  }
  .tab_drawer_heading {
    background-color: #ccc;
    color: #fff;
    border-top: 1px solid #333;
    margin: 0;
    padding: 5px 20px;
    display: block;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .d_active {
    background-color: #666;
    color: #fff;
  }
}

#img2 {
  margin-top: 90px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="active" rel="tab1">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service1-Highlighted.png" class="img-active">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service1-inactive.png" class="img-inactive">
  </li>
  </li>
  <li rel="tab2" id="img2">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service2-Highlighted.png" class="img-active">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service2-inactive.png" class="img-inactive"></li>
  <li rel="tab3">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service3-Highlighted.png" class="img-active">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service3-inactive.png" class="img-inactive"></li>
  <li rel="tab4" id="img2">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service4-Highlighted.png" class="img-active">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service-4inactive.png" class="img-inactive"></li>
  <li rel="tab5">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service5-Highlighted.png" class="img-active">
    <img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service5-inactive.png" class="img-inactive"></li>

</ul>

<div class="tab_container">
  <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
  <div id="tab1" class="tab_content">
    <h2>Tab 1 content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p>
  </div>
  <!-- #tab1 -->
  <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
  <div id="tab2" class="tab_content">
    <h2>Tab 2 content</h2>
    <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
  </div>
  <!-- #tab2 -->
  <h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3>
  <div id="tab3" class="tab_content">
    <h2>Tab 3 content</h2>
    <p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p>
  </div>
  <!-- #tab3 -->
  <h3 class="tab_drawer_heading" rel="tab4">Tab 4</h3>
  <div id="tab4" class="tab_content">
    <h2>Tab 4 content</h2>
    <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>
  </div>
  <!-- #tab4 -->
  <h3 class="tab_drawer_heading" rel="tab5">Tab 5</h3>
  <div id="tab5" class="tab_content">
    <h2>Tab 5 content</h2>
    <p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>
  </div>
  <!-- #tab5 -->
</div>
<!-- .tab_container -->
</div>

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

请删除“$”符号并替换为“jQuery”，还将类名更改为非泛型，这样代码就不会获得任何其他样式的主题。

【讨论】：

我认为部分问题在于任何 ul / li 都存在通用类样式，并且可能有一些针对它们的 javascript。在 WPBakery 中，创建的每个元素都放在一个容器中，该容器具有由 wpbakery 预先确定的类和样式。因此，如果我将 UL 放入 wpbakery 元素中，则很可能在 css 中的某处存在一种针对 WPBakery 容器中保存的任何 UL / LI 的样式。这就是为什么我认为一个不错的解决方案是尝试复制没有列表的代码，只有具有自己的类的 div。我只是不具备在 JS 中执行此操作的知识