Невозможно загрузить внешнюю страницу внутри активного с локальным хранилищем, чтобы вернуться к последнему активному при обновлении

Question

Почтовое обновление:

С вкладкой Bootstrap -4 я хочу загрузить внешнюю страницу внутри активной вкладки. И, если страница обновляется, она должна вернуться к последней активной вкладке.

При Bootstrap navs я пытался загрузить внешнюю страницу внутри активного div. И, если страница обновлена, она должна вернуться к последней активной вкладке. Итак, я сохранил последнюю активную вкладку в localstorage и с этим активная вкладка может быть активирована.

В то же время, если загрузка вечной страницы занимает некоторое время, поэтому я добавил bootstrap spinner и вот код,

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
    var $this = $(this),
      loadurl = $this.attr('href'),
      targ = $this.attr('data-target');
    $.get(loadurl, function(data) {
      $(targ).html(data);
    });
    $this.tab('show');
    $("#tabsp").hide();
    return false;
  });

  var activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
    var $this = $(this),
      loadurl = $this.attr('href'),
      targ = $this.attr('data-target');
    $.get(loadurl, function(data) {
      $(targ).html(data);
    });
    $this.tab('show');
    $("#tabsp").hide();
    return false;
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a href="/dashboard/proinfo.php" data-target="#home" class="nav-link active" id="contacts_tab" data-toggle="tab"> Info </a>
  </li>
  <li class="nav-item">
    <a href="/dashboard/ads.php" data-target="#ads" class="nav-link" id="ads-tab" data-toggle="tab"> Ads </a>
  </li>
  <li class="nav-item">
    <a href="/dashboard/favor.php" data-target="#fav" class="nav-link" id="fav-tab" data-toggle="tab"> Favorites </a>
  </li>
  <li class="nav-item">
    <a href="/dashboard/sold.php" data-target="#sol" class="nav-link" id="sol-tab" data-toggle="tab"> Sold </a>
  </li>
</ul>



<div class="tab-content profile-tab" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="contacts_tab">

  </div>
  <div class="tab-pane fade" id="ads" role="tabpanel" aria-labelledby="ads-tab">

  </div>
  <div class="tab-pane fade" id="fav" role="tabpanel" aria-labelledby="fav-tab">

  </div>
  <div class="tab-pane fade" id="sol" role="tabpanel" aria-labelledby="sol-tab">

  </div>
  <div class="text-center" id="tabsp">
    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

Я пытался добавить следующее,

• загрузить вечную страницу внутри div
• вернуться к последнему активному на refre sh с localalstorage
• и вертушкой bootstrap при загрузке

Во время посещения index_file.php в первый раз, я могу просмотреть только bootstrap spinner, что означает ЕСЛИ нет localstorage

Как мне решить эту проблему?

Answer 1

Это должно решить ваши проблемы, но я не могу полностью проверить это.

var defaultTab = 'contacts_tab';
$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var tabEl = $(e.target);
    saveIntoLocalStorage(tabEl.attr('id'));
    loadPage(tabEl);
  });
  var tabToActivate = loadFromLocalStorage();
  loadPage(tabToActivate);
});

function loadFromLocalStorage() {
  var activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    return $("#" + activeTab);
  } else {
    saveIntoLocalStorage(defaultTab);
    return $("#" + defaultTab);
  }
}

function saveIntoLocalStorage(id) {
  localStorage.setItem('activeTab', id);
}

function loadPage(tabEl) {
  debugger;
  var $this = $(this),
    loadurl = tabEl.attr('href'),
    targ = tabEl.attr('data-target');
  $.get(loadurl, function(data) {
    $(targ).html(data);
  });
  $this.tab('show');
  $("#tabsp").hide();
  return false;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a href="/dashboard/proinfo.php" data-target="#home" class="nav-link active" id="contacts_tab" data-toggle="tab"> Info </a>
  </li>
  <li class="nav-item">
    <a href="/dashboard/ads.php" data-target="#ads" class="nav-link" id="ads-tab" data-toggle="tab"> Ads </a>
  </li>
  <li class="nav-item">
    <a href="/dashboard/favor.php" data-target="#fav" class="nav-link" id="fav-tab" data-toggle="tab"> Favorites </a>
  </li>
  <li class="nav-item">
    <a href="/dashboard/sold.php" data-target="#sol" class="nav-link" id="sol-tab" data-toggle="tab"> Sold </a>
  </li>
</ul>



<div class="tab-content profile-tab" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="contacts_tab">

  </div>
  <div class="tab-pane fade" id="ads" role="tabpanel" aria-labelledby="ads-tab">

  </div>
  <div class="tab-pane fade" id="fav" role="tabpanel" aria-labelledby="fav-tab">

  </div>
  <div class="tab-pane fade" id="sol" role="tabpanel" aria-labelledby="sol-tab">

  </div>
  <div class="text-center" id="tabsp">
    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>