addClass and removeClass with Jquery

I’m trying to create a menu where the one div gets a class if it’s clicked, however I’d like to remove the class from the last link clicked on 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 to the link I click and if I click the next link in the menu it will remove the active class and add it to another.

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

Link to fiddle is here

I considered the following to answer

• IDs were duplicates
• classes were repeating, put everything in a parent item, with only one class
• I moved the links into 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><divclass="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>

<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, if you want to call the click event, the ‘#’ represents ID and the ‘.’ class.

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

This should work.

You have to use classes in addition to IDs. IDs are unique, classes are for repeated elements that share something in common.

Also note that your HTML is poorly formatted because you have li starting inside anchors that close outside of them …

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

Having said that you can do this 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: link