URL结构标签问题

Question

由于我与选项卡中的URL结构问题。如果我已经选择了tab-2和URL被改变为https://example.com/#tab-2和制表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了。您可以在那里将其删除。