@stup_klev

Как дополнить скрипт вкладок?

Как дополнить скрипт табов, чтобы третья вложенность вкладок работала верно?
Дано: табы, помещенные друг в друга на JQuery
Необходимо: чтобы каждому родителю под цифрой "2" присваивался свой блок с контентом, а не брался общий к каждому первому родителю "2" во всех колонках
Выполнить код можно тут: кляц

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mama-tab">
  <div class='main-links'>
    <div class="sppb-nav sppb-nav-tabs tab-head-wrap hh1">
      <button id="sppb-content-1572967904513" class="link">1</button>
      <button id="sppb-content-1572967904514" class="link">1</button>
      <button id="sppb-content-1572967904515" class="link">1</button>
    </div>
  </div>
  <div class="tab">
    <div class="mama-tab mama-2">
      <div class='main-links'>
        <div class="sppb-nav sppb-nav-tabs tab-head-wrap hd-sub">
          <div class="model-first-row">
            <div class="col-model col-model-01">
              <button class="link">2</button>
            </div>
            <div class="col-model col-model-02">
              <button class="link">2</button>
              <button class="link">2</button>
            </div>
            <div class="col-model col-model-03">
              <button class="link">2</button>
              <button class="link">2</button>
              <button class="link">2</button>
            </div>
          </div>
        </div>
      </div>
      <div class="tab">
        <div class='main-links'>
          <div class="txt-txt">
            Этот контент должен быть только у первой "2" в первой левой колонке, но его захватывает в               каждый первый "2" во всех колонках, причем второй и третий "2" в одной колонке (серединная  и правая) этот блок не захватывает
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

jQuery(document).ready(function($) {
  $('.link').on('click', function() {
    $(this).siblings('.link').removeClass('active');
    $(this).addClass('active');

    const index = $(this).parent().children('.link').index($(this));

    let linksBlock = $(this).closest('.main-links');
    if (linksBlock.length === 0) {
      linksBlock = $(this);
    }

    linksBlock.siblings('.tab').hide();
    linksBlock.siblings('.tab').eq(index).show();
  });
});

.tab-content {
  display: none;
}

.tab-content>.tab>.tab-content {
  display: none;
}

.tab {
  display: none;
}

.tab-content {
  display: none;
}

.model-first-row {
  display: flex;
}

.col-model {
  display: flex;
  flex-direction: column;
}

.link {
  margin-right: 13px;
}

.hh1 {
  width: max-content;
  background: yellow;
  margin-bottom: 10px;
}

.model-first-row {
  background: orange;
  width: max-content;
  .txt-txt {
    background: wheat;
  }
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
18 апр. 2024, в 12:52
500000 руб./за проект
18 апр. 2024, в 12:48
6000 руб./за проект
18 апр. 2024, в 12:41
3000 руб./за проект