現在のタブをアクティブにする方法

Question

ページを更新した後でも、現在のタブを有効にします。ブートストラップと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を使用してこの機能を試していますが、うまくいかないことを教えてください。

Answer 1

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>