Como manter o estilo CSS ativo após clicar em um botão

No CSS, a pseudo-classe especifica o estado específico dos elementos selecionados. Com a ajuda dessas classes, várias propriedades de estilo são adicionadas para estilizar a parte específica dos elementos. No entanto, o jQuery é uma biblioteca javascript específica que fornece métodos que ajudam nas funcionalidades do CSS, como manter o botão ativo depois de clicar nele.

Este artigo discutirá:

• O que é: ativo no CSS?
• Como manter o CSS: estilo ativo após clicar em um botão?

Pré -requisito: Crie um arquivo HTML

Em html, adicione três “”Elementos e atribui a cada um“btn" e "NAV-BTN" Aulas:

Lar
Sobre nós
Contate-nos

Saída

Agora, vamos refere -se ao assunto principal de nosso post.

O que é: ativo no CSS?

O ":ativo”Pseudo-classe indica o elemento que está em um estado ativo. No CSS, esta classe é especificada com os elementos a serem estilizados como ativos, como botões, links ou mais.

Estilo de estilo “Nav-BTN”

O ".Nav-BTN: ativo"É usado para acessar a classe"NAV-BTN”. Esta aula é definida com o “:ativo”Pseudo-classe e aplicou as seguintes propriedades para mostrar o estado ativo do botão quando clicado pelo usuário:

.NAV-BTN: ativo
Background-Color: BlueViolet;
Cor: Whitesmoke;
intensidade da fonte: Negrito;

Aqui:

• ““cor de fundo”Altera a cor de fundo do elemento.
• ““cor”Especifica a cor da fonte.
• ““espessura da fonte”Define a espessura da fonte.

Saída

A saída acima verifica se o estilo dos botões muda quando clicado pelos usuários. No entanto, eles não estão mantendo seu estado ativo e desaparecem após o clique.

Como manter o CSS: estilo ativo depois de clicar em um botão?

jQuery pode ser usado para manter o estado ativo dos botões. Para esse fim, adicione os estilos dentro da classe “NAV-BTN”E anexar a classe“.ativo" com isso:

.NAV-BTN.ativo
Background-Color: BlueViolet;
Cor: Whitesmoke;
intensidade da fonte: Negrito;

Código jQuery

No "”Tag Adicione o seguinte código:

$ (".Nav-btn ").on ("clique", function ()
$ (".Nav-btn ").removeclass ("ativo");
$ (isso).addclass ("ativo");
);

Aqui está a descrição do código acima:

• O "$ ()”É a função de atalho do“getElementById”.
• O ".NAV-BTN”É a classe acessada através desta função.
• O ".on (clique, function ()”Denota a função que será acionada no botão Clique.
• O "$ (“.Nav-btn ”).removeclass ("ativo");”Remova os estilos de cada botão e implemente os estilos quando o botão for clicado.
• ““$ (isso).addclass ("ativo");”Significa que os estilos devem ser aplicados apenas a esse botão que está atualmente clicado.

Saída

É isso! Você aprendeu com sucesso a manter o CSS “:ativo”Estilo após um botão clique.

Conclusão

Para manter o estado ativo de um botão, os métodos de jQuery são usados. Para esse fim, primeiro, acesse o botão usando o “$ ()”Método. Em seguida, defina a função para aplicar os estilos de estado ativos no clique do mouse. Implementar o manipulador de eventos e a função. A função removerá primeiro os estilos de cada botão. Então, "$ (isso)"É usado com o": addclass ()”Para manter o estado ativo do botão. Este artigo demonstrou o procedimento para manter o CSS: estilo ativo depois de clicar em um botão.