Структура URL для выпуска вкладок

Question

Поскольку у меня есть проблема со структурой URL на вкладках.если я выбрал tab-2 и URL-адрес изменился на https://example.com/#tab-2 и для tab-3 https://example.com/#tab-3 и так далее.

Проблема в том, что если я ввел этот https://example.com/#tab-4 или любой другой в строке поиска, он всегда показывает мне https://example.com/#tab-1 как текущий.

Но я бы хотел сделать https://example.com/#tab-4, ток показывает мне tab-4 выбран.Как бы я реализовать в моем текущем коде?

$('.projects_select').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('.projects_select').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
      //  window.location.href = window.location.href+"#tab_id";
    });

.tab-content {
  display: block;    /* undo display:none          */
  height: 0;         /* height:0 is also invisible */ 
  overflow: hidden;  }

.tab-content.current {
  height: auto;      /* let the content decide it  */ }

.projects_select {
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
  color: #333;
  padding: 17px 0;
  width: 16.66%;
  float: left;
  cursor: pointer;
  border-style: solid;
  border-width: 1px 1px 1px 0px;
  font-style: normal;
  font-weight: 700; }


.projects_select.current {
  font-weight: 500;
  position: relative;
  color: #fff;
  background: #313641; }

.projects_select.current:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: #333;
  border-width: 20px;
  margin-left: -20px;
  }

.tab_Menu{
  padding: 35px 10.7% 75px;
  background: #efefef;  }

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

<div class="wrapper tab_Menu">
   <a class="projects_select tab-link current" data-tab="tab-1" href="#tab-1"> Tab-1 </a>
   <a class="projects_select tab-link" data-tab="tab-2" href="#tab-2"> Tab-2 </a>
   <a class="projects_select tab-link" data-tab="tab-3" href="#tab-3"> Tab-3 </a>
   <a class="projects_select tab-link" data-tab="tab-4" href="#tab-4"> Tab-4 </a>
   <a class="projects_select tab-link" data-tab="tab-5" href="#tab-5"> Tab-5 </a>
</div>
    
<div class="tab-content current" id="tab-1"> Tab-1 </div>
<div class="tab-content" id="tab-2"> Tab-2 </div>
<div class="tab-content" id="tab-3"> Tab-3 </div>
<div class="tab-content" id="tab-4"> Tab-4 </div>
<div class="tab-content" id="tab-5"> Tab-5 </div>

Answer 1

Вы можете получить хеш с помощью window.location.hash.Таким образом, в вашем скрипте вы можете сделать что-то вроде этого:

$(document).ready(function(){
    if($('.tab-link[href=' + window.location.hash + ']')){
        $('.tab-link[href=' + window.location.hash + ']').addClass('current');
    }
    else {
        $('.tab-link[href=#tab1]').addClass('current');
    }
});

Не проверял этот код, хотя.Вам больше не нужно устанавливать текущий класс в HTML.Вы можете удалить его там.