Как определить активный класс в зависимости от ссылки?

Question

Столкнулся с такой проблемой, есть табы, которые показывают контент

Как показать активную вкладку в зависимости от ссылки? Например: есть ссылка site.ru/1 данная ссылка показывает контент где есть 1, ссылка site.ru/1#2, где показываем активную вкладку два

Пример кода ниже:

$(".tab_content").hide();
$(".tab_content:first").show();

$('.panel_signup_shop').hide();

$("ul.tabs li").click(function() {

  $(".tab_content").hide();
  var activeTab = $(this).attr("rel");
  $("#" + activeTab).fadeIn();

  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");

});

$(".tab_drawer_heading").click(function() {

  $(".tab_content").hide();
  var d_activeTab = $(this).attr("rel");
  $("#" + d_activeTab).fadeIn();

  $(".tab_drawer_heading").removeClass("d_active");
  $(this).addClass("d_active");

  $("ul.tabs li").removeClass("active");
  $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
});

$('ul.tabs li').last().addClass("tab_last");

.main {
  display: flex;
  flex-direction: column;
}

.tabs {
  margin-bottom: 30px;
  display: flex;
      list-style: none;
}

.tabs li {
  margin-left: 30px;
}

.active {
  color: red;
}

.number {
  font-size: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main">
  <ul class="tabs">
    <li class="active" rel="tab1">Показываем один</li>
    <li rel="tab2" class="tab_last">Показываем два</li>
  </ul>
  <div class="main-tabs">
    <div id="tab1" class="tab_content" style="display: block;">
      <span class="number">1</span>
    </div>
    <div id="tab2" class="tab_content" style="display: none;">
      <span class="number">2</span>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как определить активный класс в зависимости от ссылки?

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