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

Image Maps + Responsive Tabs with rwdImageMaps

本文关键字：响应 选项 rwdImageMaps 映射 带有 图像      更新时间：2023-09-26

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

我找到了一种方法，通过使用下面的代码，使图像映射+响应式"手风琴"与rwdImageMaps一起很好地适用于Divi主题：（Divi 主题手风琴模块的示例）

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

但是，我很难找到一个触发器，使预先构建的"选项卡"模块以类似的方式工作。（Divi 主题选项卡模块的示例）

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

我一直在尝试的想法是，如果您单击.et_pb_tabs_controls li，然后激活相应的 .et-pb-active-slide 以触发图像映射坐标......

下面是结构的示例：

<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来帮助触发在隐藏选项卡中设置图像映射坐标的功能。

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

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

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

调用 rwdImageMaps 以处理图像映射以调整大小：

 $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
启动鼠标悬停

在选项卡上时要重置的坐标：

$(function(){
$(".et_pb_tabs_controls").hover(function ( ) {
      $(window).trigger('resize'); 
 });
})
相关文章：