При переходе по якорной ссылке попадать на соответствующую вкладку

Question

Есть код вкладок (табы), приведу его ниже. Подскажите пожалуйста, как сделать, что бы при переходе по определенному 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>

Answer 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>

БЛОГ НА HUSL

При переходе по якорной ссылке попадать на соответствующую вкладку

Ответы (1 шт):