javascript - 完成的 JS/HTML/CSS 代码与 Wordpress WPBakery 冲突，无法执行

Question

在 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，但我终其一生都想不出如何将这个代码笔(或任何自定义的东西)合并到网站中。

我试过的插件:• 自定义 CSS/JS - 允许您向站点添加自己的 css(兼容 scss)和 javascript• Header Footer 代码管理器 - 让您在页眉中包含脚本，而无需处理 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>

Answer 1

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