addClass and removeClass with Jquery

Question

I am trying to create a menu where a div wins a class if clicked, but I would like to remove the class from the last link clicked in the menu.

<div id="bolinha-dentro"></div><a href="">Meu link</a>
<div id="bolinha-dentro"></div><a href="">Meu link</a>
<div id="bolinha-dentro"></div><a href="">Meu link</a>
<div id="bolinha-dentro"></div><a href="">Meu link</a>

I want the active class to be added on the link I click and in case I click on the next menu link it will remove the active class and add on another.

$(document).ready(function() {
    $('#bolinha-dentro').click(function(){
        $(this).toggleClass('active');     
    });
})

Link to the fiddle this one

Answer 1

I considered the following to answer

• the Ids were duplicated
• the classes were repeating, I put everything in one parent item, with only one class
• moved the links inside the div, because they were empty and could not be clicked

$(function(){ // equivalente a $(document).ready(function(){
  $('.bolinhas a').click(function(event) {
    event.preventDefault();
    $('.bolinhas > div').removeClass('active');
    $(this).parent().addClass('active');
  });
});

.bolinhas > div.active {
  background-color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bolinhas">
  <div><a href="#">Meu link</a></div>
  <div><a href="#">Meu link</a></div>
  <div><a href="#">Meu link</a></div>
  <div><a href="#">Meu link</a></div>
</div>

Answer 2

$(function() {
$('.bolinha-dentro').click(function(){
  $('.bolinha-dentro').removeClass('ativo');
  $(this).addClass('ativo');     
});
});

.bolinha-dentro{ background:#000}
.bolinha-dentro a,.bolinha-dentro a:visited{text-decoration:none; color:#FFF}
.ativo{ background:#FF0000; color:#FFF }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bolinha-dentro"><a href="#" >Meu link</a></div>
<div class="bolinha-dentro"><a href="#">Meu link</a></div>
<div class="bolinha-dentro"><a href="#">Meu link</a></div>
<div class="bolinha-dentro"><a href="#">Meu link</a></div>

Answer 3

<div class="bolinha-dentro></div><a href="">Meu link</a>
<div class="bolinha-dentro></div><a href="">Meu link</a>
<div class="bolinha-dentro></div><a href="">Meu link</a>
<div class="bolinha-dentro></div><a href="">Meu link</a>

First thing, if you want to call the click event, #represents ID and class..

$(document).ready(function() {
    $('.bolinha-dentro').click(function(){
        $(this).toggleClass('active');     
    });
})

That should work.

Answer 4

You need to use classes in ID view. Ids are unique, classes are for repeated elements that share something in common.

Also note that your HTML is badly formatted because you have li starting within anchors that close off from them...

<div id="bolinha-fora"></div><li> Contato </a></li>   // errado

Having said that you can do it with Javascript like this:

(function () {
    var links = document.querySelectorAll('#nav-menu ul li');
    [].forEach.call(links, function (li) {
        li.addEventListener('click', mudarClasses);
    });

    function mudarClasses() {
        [].forEach.call(links, function (li) {
            li.classList.remove('ativo');
        });
        this.classList.add('ativo');
    }
})();

jsFiddle: http://jsfiddle.net/hcwzmvLn/