2

Есть код вкладок (табы), приведу его ниже. Подскажите пожалуйста, как сделать, что бы при переходе по определенному URL (например: site.com/page/#tab2) переходило на соответствующую вкладку? <a href="#tab2"> я прописала, но почему то все ровно открывает первую вкладку.

$(".lsf__tab-item").not(":first").hide();
$(".lsf__wrapper .lsf__tab").click(function() {
    $(".lsf__wrapper .lsf__tab").removeClass("active-tab").eq($(this).index()).addClass("active-tab");
    $(".lsf__tab-item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active-tab");
.lsf__tab {
    width: 100px;
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="lsf__wrapper">
  <div class="tabs">
    <ul class="lsf__tabs-nav">
      <li class="lsf__tab">
        <a href="#tab1">
          <p>Вкладка 1</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab2">
          <p>Вкладка 2</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab3">
          <p>Вкладка 3</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab4">
          <p>Вкладка 4</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab_content">
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 1
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 2
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
        <ul class="lsf__tab-points">
          <li>
            Текст 3
          </li>
        </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 4
        </li>
      </ul>
    </div>
  </div>
</div>

1 ответ 1

1

Можно попробовать такой вариант. На мой взгляд можно сделать как-то получше, но это то что пришло в голову первым делом. Код написан с расчётом что нужный таб будет указываться в url в виде:

site.com/page/#tab2 где 2 - это порядковый номер необходимого таба.

Чутка изменил и дополнил только JS. Комментариями помечено что именно обновилось. HTML/CSS не трогал.

// Получаем номер таба который хотим открыть по якорю (нумерация с 1).
let initialTab = +window.location.hash.substring(4);

// Проверяем номер таба, полученный из url. Если передан несуществующий, то за показываемый таб используем первый по порядку.
const totalTabs = $(`.lsf__tab-item`).length;
if (initialTab <= 0  || initialTab > totalTabs) {
  console.warn(`Wrong tab number from URL.`)
  initialTab = 1;
}

// Прячем все табы, кроме найденного выше. Если якоря в ссылке не было то прячем все кроме первого таба.
$(".lsf__tab-item").not(`:nth-of-type(${initialTab ? initialTab : 1})`).hide();

$(".lsf__wrapper .lsf__tab").click(function() {
$(".lsf__wrapper .lsf__tab").removeClass("active-tab").eq($(this).index()).addClass("active-tab");
$(".lsf__tab-item").hide().eq($(this).index()).fadeIn()
}).eq(initialTab - 1).addClass("active-tab"); // Тут выставляем класс активного таба.
.lsf__tab {
    width: 100px;
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="lsf__wrapper">
  <div class="tabs">
    <ul class="lsf__tabs-nav">
      <li class="lsf__tab">
        <a href="#tab1">
          <p>Вкладка 1</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab2">
          <p>Вкладка 2</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab3">
          <p>Вкладка 3</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab4">
          <p>Вкладка 4</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab_content">
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 1
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 2
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
        <ul class="lsf__tab-points">
          <li>
            Текст 3
          </li>
        </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 4
        </li>
      </ul>
    </div>
  </div>
</div>

5
  • Большое спасибо за ответ. Все верно контент открывается тот, который нужен. Только вот класс active-tab, который подставляется на кнопки (переключения вкладок <li class="lsf__tab">) все ровно остается на первой кнопке. Подскажете как исправить? 9 мар 2021 в 15:13
  • @АннаМатвеева Ага, поправил последнюю строчку кода. Так должно работать :)
    – Zdarova
    9 мар 2021 в 15:26
  • @АннаМатвеева Странненько. Я в песочнице проверил - там ок, я б глянул что у вас за ошибка, если бы мог) codepen.io/Zdarova/pen/rNWQVBb?editors=1111#tab3 Вот тут добавил визуальный стиль для активного таба чтобы было видно. Тут норм отрабатывает.
    – Zdarova
    9 мар 2021 в 15:31
  • Простите, все верно. Спасибо огромное! 9 мар 2021 в 15:32
  • @АннаМатвеева Ну прекрасно))) Лучше это решение конечно доработать) Ну уверен что всегда будет работать как следует. Я тут не учитывал что может прилететь URL какой-нибудь где будет много разных хэшей. А так рад что помог! Всего хорошего :)
    – Zdarova
    9 мар 2021 в 15:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.