使用jQuery/JavaScript启用和禁用选项卡

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<div class="tab-container">
  <div class="tab">
    <button class="tab-button active" data-tab="tab1">Tab 1</button>
    <button class="tab-button" data-tab="tab2">Tab 2</button>
    <button class="tab-button" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">Tab 1 Content</div>
    <div id="tab2" class="tab-pane">Tab 2 Content</div>
    <div id="tab3" class="tab-pane">Tab 3 Content</div>
  </div>
</div>

$(document).ready(function() {
  // 默认显示第一个选项卡
  $('.tab-pane').hide();
  $('.tab-pane.active').show();

  // 点击选项卡按钮切换内容
  $('.tab-button').click(function() {
    var tabId = $(this).data('tab');
    $('.tab-button').removeClass('active');
    $(this).addClass('active');
    $('.tab-pane').hide();
    $('#' + tabId).show();
  });

  // 禁用选项卡
  function disableTab(tabId) {
    $('#' + tabId).addClass('disabled');
    $('#' + tabId).find('button').attr('disabled', 'disabled');
  }

  // 启用选项卡
  function enableTab(tabId) {
    $('#' + tabId).removeClass('disabled');
    $('#' + tabId).find('button').removeAttr('disabled');
  }

  // 示例：禁用第二个选项卡
  disableTab('tab2');

  // 示例：启用第二个选项卡
  enableTab('tab2');
});