Javascript 使用Angularjs将当前选项卡设置为活动选项卡
我有五个标签,它们工作正常。当我刷新页面时,当前活动的选项卡将切换到默认状态。 但我想将其设置为当前活动状态,即使在刷新之后也是如此。请告诉我哪里出了问题 Html代码:Javascript 使用Angularjs将当前选项卡设置为活动选项卡,javascript,angularjs,Javascript,Angularjs,我有五个标签,它们工作正常。当我刷新页面时,当前活动的选项卡将切换到默认状态。 但我想将其设置为当前活动状态,即使在刷新之后也是如此。请告诉我哪里出了问题 Html代码: <div class="container"> <section ng-app="myApp" ng-controller="TabController as tab"> <ul class="nav nav-pills"> <li
<div class="container">
<section ng-app="myApp" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Home</a></li>
<li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Underwriting</a></li>
<li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Operations</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Home</h4>
</div>
<div ng-show="tab.isSet(2)">
<h4>Underwriting</h4>
</div>
<div ng-show="tab.isSet(3)">
<h4>Operations</h4>
</div>
</section>
</div>
工作演示:将选项卡索引存储在本地存储中,并在页面刷新时再次设置它。当索引以字符串形式从本地存储器输入时,请将其转换为数字
this.tab = +localStorage.getItem('tabIndex') || 1;
this.setTab = function (tabId) {
this.tab = tabId;
localStorage.setItem('tabIndex', tabId);
};
下面是将选项卡索引存储在本地存储中,并在页面刷新时再次设置它。当索引以字符串形式从本地存储器输入时,请将其转换为数字
this.tab = +localStorage.getItem('tabIndex') || 1;
this.setTab = function (tabId) {
this.tab = tabId;
localStorage.setItem('tabIndex', tabId);
};
这里是更新的Js
(function () {
var app = angular.module('myApp', []);
app.controller('TabController', function () {
if(typeof(localStorage.currentTab)=="undefined")
this.tab = 1;
else
this.tab = parseInt(localStorage.currentTab);
this.setTab = function (tabId) {
localStorage.currentTab=tabId;
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
})();
更新的Js
(function () {
var app = angular.module('myApp', []);
app.controller('TabController', function () {
if(typeof(localStorage.currentTab)=="undefined")
this.tab = 1;
else
this.tab = parseInt(localStorage.currentTab);
this.setTab = function (tabId) {
localStorage.currentTab=tabId;
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
})();
您需要将活动选项卡存储在某个位置(如本地存储/服务器)。在页面上刷新读取选项卡数据并进行设置。如果先前设置了值,请使用web存储并检查存储。LocalStorage正在工作,但这不是一种好方法。为此,您可以使用angular router或ui router。您需要将活动选项卡存储在某个位置(如本地存储/服务器)。在页面上刷新读取选项卡数据并进行设置。如果先前设置了值,请使用web存储并检查存储。LocalStorage正在工作,但这不是一种好方法。为此,您可以使用angular router或ui router