问题描述
在codepen的帮助下，我想到了以下内容： ://codepen.io/Lancewalker/pen/zepjXr
您可以在此处查看样机版本： :
它可以完美工作并具有我需要的确切功能，唯一缺少的是我在此处模拟的移动显示器：
我的问题：WPBakery是一场噩梦。 我很久以前就买了这个主题，其中包括WPBakery，我一生都无法弄清楚如何将此Codepen（或许多自定义项）整合到网站中。
我尝试过的插件：?自定义CSS / JS-可让您向站点添加自己的css（与csss兼容）和javascript?页眉页脚代码管理器-可在脚本中包含脚本而无需处理PHP。
我尝试使用自定义HTML元素和自定义JS元素（包括脚本和html），然后将HTML添加到样式表中。
这是当前的工作主页： :
当我使用自定义html / js添加代码时，会发生以下情况： :
如您所见，当您获得服务时，屏幕右侧的小li元素（允许您在页面之间导航）最终随机地将其插入我创建的codepen中的ul中。
一个没有根据的猜测：用于屏幕右侧li元素（允许您导航主页）的JS与我分配给我的Codepen UL的JS /类冲突。
另一种解决方法：如果有人可以帮助我重做代码以具有单击功能，而不使用列表/无序列表，而使用自定义类，则它有可能与Wordpress / WPbakery不冲突
如果有人可以提供帮助，这是我在网站上真正想要的唯一复杂的事情，但这对我很重要。 我愿意授予访问权限/为此付钱，我知道这只是知道WPBakery / Wordpress如何比我更好地工作。 我非常精通html / css，但是js / php是我的初学者。
我会把它张贴在工作上，但是上一次我有人在项目的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>
1楼
请删除“ $”符号并替换为“ jQuery”，还将类名更改为非通用名称，以使代码不会获得任何其他样式的主题。