Dynamically change class names in JavaScript

Use classList property and it's add method. remove will remove the class

  document.getElementById(id).classList.add("active a red");

With navmenus, you want to set the active state on the li and apply the style to the a within the active li.

The following has both the id, the active class and the onclick handler in the li ( as well as a fake href in the a) and functions to remove the active class from all li's on the click and then apply it to the selected li. The .active class CSS then colors the a in red.

function changeActive(option){
  var option = option;
  var li = document.getElementsByTagName("li");
  for(i=0;i<li.length;i++){
     li[i].classList.remove("active");
  }
  document.getElementById(option).classList.add("active");
}

ul{list-style:none}
a{color:black;text-decoration:none}
.active a{color:red}

<ul id="menu">
    <li class="active" onclick="changeActive('admin')" id="admin"><a  href="#">Admin</a></li>
    <li onclick="changeActive('dash')" id="dash"><a href="#">Dash</a></li>
    <li onclick="changeActive('notifs')" id="notifs"><a href="#">Notifs</a></li>
</ul>

If "efficient" means with the least amount of work for the browser to do, then the following may qualify. It has no loops and 3 lines of code.

You seem to want to change the class the clicked on element and remove it from any others that have that class. If you pass this from the click listener you don't need getElementById. If the listeners are added using addEventListener, then this is set to the element so you don't have to pass it.

And if you use querySelector you get straight to the element that already has the particular class so:

function changeActive(evt) {
  // Get the current "active" element
  var active = document.querySelector('.active.a.red');
  // Make it not active
  active.className = 'a black';
  // Set the clicked on element to active
  this.className = 'active a red';
}

// Add listeners when the load event occurs
window.onload = function(){
  Array.prototype.forEach.call(document.querySelectorAll('#menu a'), function(a) {
    a.addEventListener('click', changeActive,false);
    console.log(a.attributes[1].value)
  });
};

.active {
  color: red;
}

<ul id="menu">
    <li><a id="admin" class="active a red">Admin</a></li>
    <li><a id="dash" class="a black">Dash</a></li>
    <li><a id="notifs" class="a black">Notifs</a></li>
</ul>

I don't think it's sensible to use for..in over a host object where you really don't know what you're going to get. It's also not a good idea to assume that the first attribute is the id. If you want the id, get it directly using the id property.

Please check the below code,
HTML:

<ul id="menu">
    <li><a class="active a red">Admin</a></li>
    <li><a class="a black">Dash</a></li>
    <li><a class="a black">Notifs</a></li>
</ul>

jQuery:

$( document ).ready(function() {
    $('#menu li a').on('click', function() {
        $('#menu li a').removeClass().addClass( "a black" );
        $(this).removeClass().addClass( "active a red" );
    });
});

reduced HTML code, reduced JS code, no loops, no ID references to the elements, easy to understand. jQuery elements reference works same as CSS.

Note: Please dont forget to add jQuery library.

 document.getElementById(id).setAttribute("class", "class-name");