javascript - 图像映射 + 带有 rwdImageMaps 的响应式选项卡

Question

我正在寻找一种方法，将 rwdImageMaps 功能添加到名为 Divi 的 WordPress 主题中的预构建选项卡模块。

我找到了一种方法，通过使用下面的代码，使图像映射+响应式“ Accordion ”与 rwdImageMaps 的 Divi 主题配合良好:( Example of Divi Theme Accordian Module )

jQuery('.et_pb_toggle').click(function(){
    jQuery('img[usemap]').rwdImageMaps();
});

但是，我很难找到一个触发器来使预构建的“选项卡”模块以类似的方式工作。 (Example of Divi Theme Tabs Module)

有没有办法让列表项的单击在单独的 div 中启动 rwdImageMaps？

我一直在尝试的想法是，如果您单击 .et_pb_tabs_controls li，然后使相应的 .et-pb-active-slide 处于事件状态以触发图像 map 坐标...

以下是结构示例:

<div class="et_pb_tabs">
<ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
</ul>
<div class="et_pb_all_tabs">
    <div class="et_pb_tab clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 2; display: none; opacity: 0;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 1; display: none; opacity: 0;">content</div>
    <div class="et_pb_tab clearfix" style="z-index: 1; display: none; opacity: 0;">content</div>
</div>

由于这是一个预构建的模块，我希望能够添加额外的 JavaScript 来帮助触发为隐藏选项卡内的图像 map 设置坐标的功能。

更新:我在下面添加了此代码，但它要求您单击图像 map 两次才能设置坐标。不理想，但没有找到一键触发它的方法:

$(function(){
$(".et_pb_row").click(function ( ) {
      $(window).trigger('resize'); 
 });
})

Answer 1

好吧，我不确定这是否是正确的代码，但到目前为止，在桌面和移动设备以及调整页面大小时都适用于我:

调用 rwdImageMaps 进行图像映射以调整大小:

 $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

当鼠标悬停在选项卡上时启动要重置的坐标:

$(function(){
$(".et_pb_tabs_controls").hover(function ( ) {
      $(window).trigger('resize'); 
 });
})