如何激活当前选项卡

问题描述：

即使在刷新页面后，我也想激活当前选项卡。我用下面的代码，即使它不工作我已经写在index.html通过使用Bootstrap和AngularJS如何激活当前选项卡

任何人都可以解决这个问题？

<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功能，但它不工作，请让我知道我要去哪里错了。

您可以使用ng-class来添加活动类。 – Hmahwish

'它不工作'...如何多一点信息，比如，你期望什么，你观察到什么，而不是在开发工具控制台中有任何错误 –

为什么在angularjs上标记了这个标记？如果您使用的是angularjs，请尝试避免使用jquery。你也使用任何路由器？像Ui路由器或NG路由器？ – rahil471

答

从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>

如何激活当前选项卡

相关推荐