My webpage has three tabs that I'm struggling to enable and disable correctly. Whenever I click on a tab, it routes me to the desired page but the tab remains active even though it should deactivate. Strangely, removing the code 'window.location.assign(view);' fixes this issue.
As a newbie to AngularJS/CSS, I need urgent help in resolving this. Thank you in advance!
Below is the code snippet from my HTML page and controller:
HTML-
<ul class="nav nav-pills nav-stacked" >
<li ng-class="{ active: isSet(1) }" style="width:130px;display:inline-block">
<a ng-click="setTab(1,'#/Employers')" style="background-color:#0072AD" ><b style="color:white">EMPLOYERS</b></a>
</li>
<li ng-class="{ active: isSet(2) }" style="width:110px;display:inline-block">
<a ng-click="setTab(2,'#/Products')" style="background-color:#0072AD"><b style="color:white">PRODUCTS</b></a>
</li>
<li ng-class="{ active: isSet(3) }" style="width:180px;display:inline-block">
<a ng-click="setTab(3,'#/ControlReports')" style="background-color:#0072AD"><b style="color:white">CONTROL REPORTS</b></a>
</li>
</ul>
Controller:
'use strict';
angular.module('Business.Header', [])
.controller('HeaderCtrl', ['$scope','$location','$rootScope',
function ($scope, $location, $rootScope) {
$scope.tab = 1;
$scope.isSet = function (tabNum) {
return $scope.tab === tabNum;
};
$scope.setTab = function (newTab, view) {
$scope.tab = newTab;
window.location.assign(view);
};
}]);
CSS:
/* Text Recolor */
h1, p, a {
color: #4DC9C9 !important;
}
/* Button Recolor */
.nav-pills > li.active > a, .btn-primary {
background-color: #6C6C6C !important;
border-color: #6C6C6C !important;
}