JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div ng-app="myApp" ng-controller="GreetingController">
  <ul>
    <li class="mongo">
      <a ng-click="greeting($event)"> 123 </a></li>
    <li class="monga">
      <a ng-click="greeting($event)"> 456 </a></li>
    <li class="fulano">
      <a ng-click="greeting($event)"> 789 </a></li>
  </ul>

</div>

CSS

li {
  color: black;
}

li.active {
  color: red;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', ['$scope', function($scope)  {
  $scope.greeting = function($event) {
    var target = $event.target.parentNode,
      active = document.querySelector("li.active");
    if (active != null && active.hasAttribute("class")) {
      active.setAttribute("class", active.getAttribute("class").replace("active", ""));
    }
    if (target !== null) {
      var newClass = target.getAttribute("class") == null ? "" : target.getAttribute("class");
      newClass += " active";
      target.setAttribute("class", newClass);
    }
  }
}]);