Adding a class to a bootstrap link

Question

I’m using the bootstrap and I have a menu, what I wanted was that when I clicked on a link from that menu, I displayed the page and left selected in the menu the page the user is on.

I tried to assign a class using the function .addClass() when the user clicks on the menu, but when I click until I see that it changes color, however, when the page finishes loading it loses the effect.

My code Javascript this way:

 $(document).ready(function() {
        $('a.menu').click(function() {
            $(this).addClass("style");
        });
 });

HTML:

<div id="navbar" class="navbar-collapse collapse bloco-menu">
      <ul class="nav navbar-nav ">
        <li><a class="menu" href="index.html">O Evento</a></li>
        <li><a class="menu" href="mensagem-presidente.html">Mensagem da Presidente</a></li>
         <li><a class="menu " href="palestrantes.html">Palestrantes</a></li>
          <li><a class="menu" href="localizacao.html">Local do Evento</a></li>
        <li><a class="menu" href="inscricoes.html">Inscrições</a></li>
        <li><a class="menu" href="#contact">Programação</a></li>
         <li><a class="menu" href="stands.html">Mapa de stands</a></li>
          <li><a class="menu" href="hospedagem.html">Hospedagem</a></li>
        <li><a class="menu" href="comissao-organizadora.html">Comissão Organizadora</a></li>
     </ul>

    </div><!--/.nav-collapse -->
  </div>
</nav>

CSS:

.style{color:red;font-weight:bold}

Someone could help me ?

Answer 1

Hello, I suggest you use the class "Nav Nav-pills" the bootstrap itself leaves marked the last item clicked from the menu.

Answer 2

Just adjust your JS to remove all classes style:

$('a.menu').click(function() {
  $('a.menu').removeClass("style");
  $(this).addClass("style");
});

Online example

In the example above, I changed the behavior (href) of the test links...

EDIT:

As for navigability, you can assign a id for each link... on $(document).ready(function(){}) of each page, you put a JS to trigar the style:

$(document).ready(function() {
      $('a.menu').removeClass("style");
      $("#iddobotao").addClass("style");
});