5

estou tentando criar um menu onde o uma div ganha uma class caso seja clicado, porém eu gostaria de remover a class do ultimo link clicado no 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>

Eu quero que a classe active seja adicionada no link que eu clicar e caso eu clique no próximo link do menu que ele remova a classe active e adicione em outro.

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

Link para o fiddle esta aqui

2

4 Respostas 4

3

Considerei o seguinte para responder

  • os IDs estavam duplicados
  • as classes estavam se repetindo, coloquei tudo em um item pai, com somente uma classe
  • movi os links para dentro das div, pois elas estavam vazias e não podiam ser clicadas

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

1
1

Tens de usar classes em vês de IDs. IDs são únicas, classes são para elementos repetidos que partilham algo em comum.

Repara também que o teu HTML está mal formatado pois tens li a começar dentro de âncoras que fecham fora das mesmas...

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

Tendo dito isso podes fazer isso com JavaScript assim:

(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/

1

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

2
  • Jefferson, eu gostaria de adicionar uma class active ao div com classe "bolinha-dentro" e fazer esse efeito de troca. jsfiddle.net/bruno/AzDQm/4
    – RFL
    Commented 31/07/2015 às 12:57
  • Alterei o codigo. abcs Commented 31/07/2015 às 16:44
0
<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>

Primeira coisa, se quer chamar o evento click, o '#' representa ID e o '.' class.

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

Isso deve funcionar.

2
  • Confundi um pouco aqui, na verdade é ID mesmo, é que eu digitei o código ao invés de copiar e colar.
    – RFL
    Commented 31/07/2015 às 12:28
  • E mesmo assim nao funciona? Commented 31/07/2015 às 12:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .