如何激活angularjs引導中的當前選項卡javascript

Question

我正在嘗試以下代碼來激活當前選項卡，但它不工作。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('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> 
<div> 
    <ul class="nav nav-pills " id="myTab"> 
     <li class="active"><a data-toggle="tab" href="#A"> A</a></li> 
     <li><a data-toggle="tab" href="#B"> B</a></li> 
     <li><a data-toggle="tab" href="#C"> C</a></li> 
    </ul> 

</div> 

我想我的代碼中的localStorage函數工作不正常。任何一個請求都可以指導我解決問題。我正在使用Angularjs，Bootstrap。

Answer 1

您需要將要存儲在localstorage中的對象串聯起來。您不能直接在本地存儲中存儲對象。一種解決方法可以將其存儲之前字符串化你的對象，後來解析它，當你檢索：

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
    <ul class="nav nav-pills " id="myTab"> 
     <li class="active"><a data-toggle="tab" href="#A"> A</a></li> 
     <li><a data-toggle="tab" href="#B"> B</a></li> 
     <li><a data-toggle="tab" href="#C"> C</a></li> 
    </ul> 

</div>