Блог

Главная - Вопросы по программированию - добавьте активный класс на вкладку динамически ajax и jQuery

добавьте активный класс на вкладку динамически ajax и jQuery

#javascript #jquery #ajax #bootstrap-4 #tabs

Вопрос:

Я пытаюсь создать вкладки на основе ajax, на самом деле я пытаюсь загрузить их в конкретный раздел вкладки. для этого мне нужно добавить динамический active класс, чтобы понять, какая вкладка в данный момент открыта. это то же самое, что и отличие вкладки начальной загрузки здесь в том, что она активна на основе загрузки div.

Я прочитал все другие темы, но все это не помогло мне, я создал функцию, которая загружает данные и помогает добавлять их во вкладке div, она работает, но я не могу добавлять и удалять активный класс в li и divs.

Пожалуйста, помогите мне, как я этого добиваюсь, При нажатии на li он добавит класс 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>

Ответ №1:

Я думаю, вы можете изменить свой код, просто добавьте

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

просто удалите все экземпляры активных классов, а затем добавьте активный класс на текущую вкладку, которую вы хотите.

Удачи 🙂

Метки: