Oi, Geraldo, tudo bem?
Quando você clica em um botão, a função alterarContexto
é chamada. Dentro dessa função, usamos o método forEach
para percorrer todos os botões e remover a classe active
de cada um deles. Isso garante que nenhum botão esteja ativo antes de adicionar a classe ao botão que foi clicado.
Aqui está um exemplo prático para ilustrar:
const botoes = document.querySelectorAll('.app__card-button');
function alterarContexto(contexto) {
botoes.forEach(function(botao) {
botao.classList.remove('active');
});
contexto.classList.add('active');
}
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
focoBt.addEventListener('click', () => {
alterarContexto(focoBt);
});
curtoBt.addEventListener('click', () => {
alterarContexto(curtoBt);
});
longoBt.addEventListener('click', () => {
alterarContexto(longoBt);
});
No exemplo acima, quando um botão é clicado, a função alterarContexto
é chamada com o botão clicado como argumento (contexto
). Dentro dessa função, usamos forEach
para remover a classe active
de todos os botões. Em seguida, adicionamos a classe active
apenas ao botão que foi clicado.
Então, a ordem é:
- Remover a classe
active
de todos os botões. - Adicionar a classe
active
ao botão que foi clicado.
Isso garante que apenas um botão tenha a classe active
em um dado momento, destacando o botão clicado.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!