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

【问题标题】：add active class in tab dynamically ajax and jQuery在选项卡中动态添加活动类 ajax 和 jQuery
【发布时间】：2021-08-17 23:20:48
【问题描述】：

我正在尝试制作基于 ajax 的选项卡，实际上，我正在尝试加载选项卡的特定 div。为此，我必须动态添加一个 active 类以了解当前打开的选项卡。这与 bootstrap 选项卡的不同之处在于它是基于 div 加载的选项卡处于活动状态。

我阅读了所有其他线程，但对我没有帮助，我创建了一个函数来加载数据并帮助在选项卡 div 中附加它工作，但我无法在 li 和 divs 中添加和删除活动类。

请帮助我，我是如何实现的，当点击 li 时，它会添加 class active 并且它也是 div。请帮帮我，

$(function() {
  $("ul#myTab>li>a.custLink_tabs").click(function(e) {
    pageurl = $(this).attr("dataLanding-target");
    landingtab = $(this).attr("data-landing");
    $("ul#myTab")
      .find('a[dataLanding-target="' + pageurl + '"]')
      .parent()
      .addClass("active");
    $.ajax({
      cache: false,
      url: pageurl,
      success: function(data) {
        $("div#" + landingtab).html(data);
      },
      error: function(jqHXR, textStatus) {
        if (textStatus === "timeout") {
          alert("ERROR");
        }
      },
      timeout: 10000,
    });
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabbable">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active">
      <a class="custLink_tabs" datalanding-target="./pages1.php" data-landing="tua-tab-1">TAB 1</a>
    </li>

    <li>
      <a class="custLink_tabs" datalanding-target="./pages2.php" data-landing="tip-tab-2">TAB 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tua-tab-1" class="tab-pane fade active in">
    </div>

    <div id="tip-tab-2" class="tab-pane fade"></div>
  </div>
</div>

【问题讨论】：

标签： javascript jquery ajax bootstrap-4 tabs

【解决方案1】：

我认为你可以修改你的代码，只需添加

  $(".custLink_tabs")
  .removeClass("active");

只需删除活动类的所有实例，然后将活动类添加到您想要的当前选项卡。

祝你好运:)

【讨论】：