Como eu posso trocar a cor do item selecionado no header quando eu selecionar o item desejado no menu?
Da forma como está no código abaixo não funciona, ele não mantém ativo o botão que foi clicado
Eu separei o header em um componente diferente e importo ele nas páginas que eu quero.
cabecalho.html
<body>
<div class="cabecalho">
<a class="active" href="index.html">Início</a>
<a href="aquarela.html">Aquarelas</a>
<a href="pinturasacrilicas.html">Pinturas Acrílicas</a>
<a href="desenhosdigitais.html">Desenhos Digitais</a>
</div>
</body>
changeCabecalho.js
$(".cabecalho > a").on("click", function(){
$(".cabecalho > a").removeClass("active");
$(this).addClass('active');
});
style.css
.cabecalho {
background-color: rgb(155, 54, 29);
overflow: hidden;
}
.cabecalho a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.cabecalho a:hover {
background-color: rgb(252, 252, 252);
color: black;
}
.cabecalho a.active {
background-color: #e0957d;
color: rgb(73, 26, 12);
}
Devo importar o script de troca em todas as páginas ou só no componente do header?