javascript - 如何激活当前标签页

即使刷新页面后，我也想激活当前选项卡。我使用了以下代码，即使它无法正常工作，也已经使用Bootstrap和AngularJS在index.html中编写了此代码

谁能解决这个问题？

<ul role="navigation" class="nav nav-pills" id="MyTab">
  <li role="presentation" class="active" data-toggle="tab">
    <a href="#active">Active</a>
  </li>
  <li role="presentation" data-toggle="tab">
    <a href="#list">list</a>
  </li>
  <li role="presentation" data-toggle="tab">
    <a href="#add">Add</a>
  </li>
  <li role="presentation" data-toggle="tab">
    <a href="#search">Search</a>
  </li>
</ul>

<script>
$(document).ready(function(e) {
  $("a[data-toggle='tab']").on("show.bs.tab", function(e) {
    localStorage.setItem("activeTab", $(e.target).attr("href"));
  });
  var activeTab = localStorage.getItem("activeTab");
  if(activeTab) {
    $("#myTab a[href='" + activeTab + "']").tab("show");
  }
});
</script>

我正在尝试使用此JavaScript进行此功能，但无法正常工作，请让我知道我要去哪里了。

最佳答案

从localStorage获取活动对象并将其分配给作用域变量。

$scope.activetab=localStorage.getItem('activeTab');

根据activetab值设置活动类。

<li role="presentation" data-toggle="tab" ng-class="{active: activetab == 'list'}"><a href="#list">list</a></li>
<li role="presentation" data-toggle="tab" ng-class="{active: activetab == 'add'}"><a href="#add">add</a></li>
<li role="presentation" data-toggle="tab" ng-class="{active: activetab == 'search'}"><a href="#search">search</a></li>