0

I have a toolbar with 3 menu items and I want to achieve that if I click on one of them the text would change it's color. The closest I get to achieve this is I used focus in css but it's not the best because if I click somewhere else it's gone. Is there any possible way to achieve this?

enter image description here

The admin should be in green color as well till I click on another menu item e.g. time management.

Kerk
  • 283
  • 1
  • 4
  • 24
  • The reason why focus is not working, is because when you click somewhere else, the blur event is fired and the focus event is removed. You should possibly save somewhere what navigation header is selected and what navigation child is selected. That way you can add a `selected` class to achieve the selection colors – Svenmarim Jul 23 '21 at 10:08
  • same problem with ```:active``` when I click somewhere the text color is gone – Kerk Jul 23 '21 at 10:11
  • https://stackoverflow.com/a/31178770/8018837 I think you can find your answer here – Svenmarim Jul 23 '21 at 10:11
  • thanks I will look after it – Kerk Jul 23 '21 at 10:13

1 Answers1

0

If you follow a pattern for url then it's possible For Example

  1. Admin has link /admin
  2. Users has link /admin/users
  3. Logs has link /admin/logs

Then in your navbar use ng-class="getClass('/admin')". Then you can use function something like below

$scope.getClass = function (path) {
  return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}

Refernce: SO:how-to-highlight-a-current-menu-item

Bharat
  • 1,192
  • 7
  • 14