addClass and removeClass with Jquery

Question

addClass and removeClass with Jquery

Navigation

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

3

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

javascript jquery

asked by anonymous 31.07.2015 / 14:20

4 answers

Substring (string.IndexOf) is returning unwanted parts Test concurrent queries on the REST server

score 2 · Answer 1

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>

score 1 · 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><divclass="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>

score 0 · 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, 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.

score 0 · Answer 4

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');
    }
})();

addClass and removeClass with Jquery

4 answers

jsFiddle: link