1

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?

1
  • "Devo importar o script de troca em todas as páginas ou só no componente do header?" precisa dar mais detalhes... se o header é carregado em cada página, ele tem que ser "totalmente" carregado, isso inclui seu html/css/javascript... não está claro como está fazendo isso, mas se é um componente como você disse, ele deve carregar completo e ser capaz de fazer o que é preciso Commented 23/11/2022 às 9:18

0

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

Pesquise outras perguntas com a tag .