JSFiddle - React, Tailwind, and code Playground

by Debarupa

HTML

<div id="cropProtection_tab_container">
<div data-role="navbar" id="orderSummaryTabs" class="order-summary-tab">
    <ul>
        <li><a href="#" class="ui-btn-active tab1Header" data-tab-class="tab1">Tab1 </a></li>
        <li><a href="#" data-tab-class="tab2">Tab2</a></li>
    </ul>
</div>  

<div class="tab-content">
    <div class="tab1">
        This is tab1 content
    </div>    
    <div class="tab2 ui-screen-hidden">
        This is tab2 content
    </div>
</div>
</div>
<a href="#" data-role="button" id="btn">Disable tabs</a>

JavaScript

var workedonSelection = "tab1";    
var prevSelection = "tab1";

if ((workedonSelection != "tab1") && (workedonSelection)) {
      $(".tab1").addClass("ui-screen-hidden");
      $("." + workedonSelection).removeClass("ui-screen-hidden");
      prevSelection = workedonSelection;
    }


    $("#orderSummaryTabs ul li").on("click", function () {

 if ($('#cropProtection_tab_container').hasClass('ui-disabled')) return false;
     
      var tabDisabled = $("#cropProtection_tab_container").hasClass('ui-disabled'); //for ie11, as disabled tabs are clickable in ie11
      //console.log("tabDisabled: " + tabDisabled);

      if (!(tabDisabled)) {//ie11 fix
        newSelection = $(this).children("a").attr("data-tab-class");
        $("." + prevSelection).addClass("ui-screen-hidden");
        $("." + newSelection).removeClass("ui-screen-hidden");
        prevSelection = newSelection;
      }
    });

$('#btn').click("on", function(){
   $('#cropProtection_tab_container').addClass('ui-disabled');
})