Add active class in menu Bootstrap with JQuery

Here is an example, I have simplified the HTML but retains the same structure.

It works like this: First use $(".nav li") to select the items in the list within the .nav menu. Then use the event click() to know when you click on any of the items. Finally, within the click event, delete the class active of all the elements and set the class active in the element clicked.

I modified your request a bit, if you select the <a> , it would only work by clicking on the link text, but not on the non-text areas of <li> or on <svg> . This causes, I think, a bad user experience, so I change it to cover all the <li> . But if you want it to work only on <a> , you can change the selector to: ".nav li a"

$(function() {
  
  // elementos de la lista
  var menues = $(".nav li"); 

  // manejador de click sobre todos los elementos
  menues.click(function() {
     // eliminamos active de todos los elementos
     menues.removeClass("active");
     // activamos el elemento clicado.
     $(this).addClass("active");
  });

});

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav menu">
  <li class="active">
    <a>Inicio</a>
  </li>
  <li>
    <a>Registrar</a>
  </li>
  <li>
    <a>Otra Opcion</a>
  </li>
</ul>

This code is used in all my templates, first I remove the class active of the option that was previously selected and then I add it to the option that was selected. This in the loading of the screen

$(function(){
    $("li").removeClass("active");
    $("#CargaMasiva").addClass("active");
});   

The example works well for me when I do it on a separate page, it would be almost like other colleagues did: Example:

<ul id="navi">
    <li><a class="menu" href="#">About MHG</a></li>
    <li><a class="menu" href="#">Workout Programs</a></li>
    <li><a class="menu" href="#">Fitness Tips</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>
    <li><a class="menu" href="#">Read Our Blog</a></li>
</ul>

<script>
$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});
</script>

Although they can also instead of putting the class menu inside the link <a> , put it inside the <li> , but to me personally it does not work when I use it within a template that when clicking on the <li> opens another page keeping the same menu.