單擊選項卡 2 時的 Javascript，它將阻止 UI，但選項卡 1 必須處於活動狀態

Question

我有 2 個標簽： Vehicle和geozone 。 我需要做的是當我單擊 geozone 選項卡時，它將使用blockUI阻止 UI，但在 blockUI 之后，活動選項卡必須是車輛選項卡。 有沒有辦法在 JavaScript 中做到這一點，而不是在 PHP 上使用onclick ？

我有 geozone 選項卡的這個點擊功能：

$("#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); 
});

Answer 2

你的意思是在點擊 tabs2 后，觸發點擊 tabs1？

$("#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); 

    $(".tabs1").trigger("click");  //new
});

// new
$("#mapContainer").on("click", ".tabs1", function(){
    console.log("click tabs1");
});