How can I switch between tabs while ensuring the CSS removes the "selected" class from the previously active tab?
This is my current approach:
<ul class="nav nav-tabs" style="margin-bottom: 2px !important; margin-left: 1px; border: none; color: black; font-weight: bold;">
<li ng-class="{'mainTabs-active' : isActive(1) == true}" class="mainTabs" ng-click="activeTab = 1" ng-if="userAccess == 1">
<a href="#/main/clients"> Clients </a>
</li>
<li ng-class="{'mainTabs-active' : isActive(2) == true}" class="mainTabs" ng-click="activeTab = 2" ng-if="userAccess == 1">
<a href="#/main/inventory"> Catalogs </a>
</li>
<li ng-class="{'mainTabs-active' : isActive(3) == true}" class="mainTabs" ng-click="activeTab = 3" ng-if="userAccess == 1">
<a href="#/main/configuration"> Settings </a>
</li>
<li ng-class="{'mainTabs-active' : isActive(4) == true}" class="mainTabs" ng-click="activeTab = 4" ng-if="userAccess == 1">
<a href="#/main/employees"> Employees </a>
</li>
<li ng-class="{'mainTabs-active' : isActive(5) == true}" class="mainTabs" ng-click="activeTab = 5" ng-if="userAccess == 2">
<a href="#/main/sales"> Authorizations </a>
</li>
<li ng-class="{'mainTabs-active' : isActive(6) == true}" class="mainTabs" ng-click="activeTab = 6" ng-if="userAccess == 3">
<a href="#/main/conciliation"> Reconciliation </a>
</li>
</ul>
The isActive function being used is as follows:
$scope.isActive = function(value){
if($scope.activeTab==value){
return true;
}
else{
return false;
}
}
I have attempted to simplify it by directly comparing values without using a function, but that didn't solve the issue either.
I have checked for any conflicting variable names or CSS styles, but haven't found any. Despite its simplicity, this problem has been challenging me for some time now without progress towards a solution.