How to add a class to a bootstrap link

Question

How to add a class to a bootstrap link

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

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'd display the page and leave the page that the user selected on the menu.

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

My JavaScript code looks like this:

 $(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}

Could someone help me?

html jquery css3 bootstrap-3 link

asked by anonymous 11.04.2016 / 21:39

2 answers

How to do a regular expression to validate JSF password Difference between texts with several paragraphs in Mysql

score 1 · Answer 1

1

Hello, I suggest you use the "nav nav-pills" class the bootstrap itself leaves the last item clicked on the menu.

11.04.2016 / 21:59

score 0 · Answer 2

Just adjust your JS to remove all style classes:

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

Online sample

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

EDIT:

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

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