JavaScript 当单击选项卡 2 时，它将阻止 UI，但选项卡 1 必须处于事件状态

Question

我有 2 个选项卡:车辆和地理区域。我需要做的是，当我单击 geozone 选项卡时，它将使用 blockUI 阻止 UI，但在 blockUI 之后，事件选项卡必须是车辆选项卡。有没有办法在 JavaScript 中执行此操作而不是在 PHP 上使用 onclick ？

我有地理区域选项卡的点击功能:

$("#mapContainer").on("click", ".tabs2", function(){
    console.log("tab tabs2 clicked");
    $.blockUI({ 
        message: '<h1>Geozone is not available in Windy Map.</h1>',
        css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
    } }); 

    setTimeout($.unblockUI, 2000); 
});

我有这个 PHP:

<div id="tabs1">
  <ul style="margin: 1px -2px 0px 2px;">
    <li><a href="#tabs-1" class="tabs1">Vehicle</a></li>
    <li><a href="#tabs-2" class="tabs2">Geozone</a></li>
  </ul>
</div>

Answer 1

假设您单击选项卡来激活它。您可以使用 onUnblock 回调。

$('#mapContainer').on('click', '.tabs2', function() {
    $.blockUI({ 
        message: '<h1>Geozone is not available in Windy Map.</h1>',
        css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff'
        }
    });

    setTimeout(function() { 
        $.unblockUI({ 
            onUnblock: function() { $('.tabs1').trigger('click'); } 
        }); 
    }, 2000); 
});