在选项卡中动态添加活动类ajax和jQuery

<div class="tab-container">
  <ul class="tab-menu">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="tab-panel active">
      Content 1
    </div>
    <div class="tab-panel">
      Content 2
    </div>
    <div class="tab-panel">
      Content 3
    </div>
  </div>
</div>

.tab-container {
  width: 100%;
}

.tab-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-menu li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.tab-menu li.active {
  background-color: #ccc;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

$(document).ready(function() {
  // 默认显示第一个选项卡
  $('.tab-menu li:first').addClass('active');
  $('.tab-panel:first').addClass('active');

  // 点击选项卡切换
  $('.tab-menu li').click(function() {
    var index = $(this).index();

    // 切换选项卡样式
    $('.tab-menu li').removeClass('active');
    $(this).addClass('active');

    // 切换内容区域
    $('.tab-panel').removeClass('active');
    $('.tab-panel:eq(' + index + ')').addClass('active');

    // 异步加载内容
    if (!$('.tab-panel:eq(' + index + ')').hasClass('loaded')) {
      $.ajax({
        url: 'your_api_url',
        type: 'GET',
        dataType: 'html',
        success: function(response) {
          $('.tab-panel:eq(' + index + ')').html(response);
          $('.tab-panel:eq(' + index + ')').addClass('loaded');
        },
        error: function() {
          console.log('Failed to load content.');
        }
      });
    }
  });
});