Cómo mantener el estilo CSS activo después de hacer clic en un botón

En CSS, la pseudo-clase especifica el estado específico de los elementos seleccionados. Con la ayuda de estas clases, se agregan varias propiedades de estilo para diseñar la parte específica de los elementos. Sin embargo, JQuery es una biblioteca de JavaScript específica que proporciona métodos que ayudan con las funcionalidades de CSS, como mantener el botón activo después de hacer clic en él.

Este artículo discutirá:

• Qué es: activo en CSS?
• Cómo mantener CSS: estilo activo después de hacer clic en un botón?

Prerrequisito: cree un archivo HTML

En HTML, agregue tres ""Elementos y asigne cada uno el"btn" y "NAV-BTN"Clases:

Hogar
Sobre nosotros
Contáctenos

Producción

Ahora, se refieramos al tema principal de nuestra publicación.

Qué es: activo en CSS?

El ":activo"La pseudo-clase indica el elemento que está en un estado activo. En CSS, esta clase se especifica con los elementos que se diseñarán como activos, como botones, enlaces o más.

Clase de estilo "NAV-BTN"

El ".NAV-BTN: Activo"Se usa para acceder a la clase"NAV-BTN". Esta clase se establece con el ":activo"Pseudo-Clase y aplicó las siguientes propiedades para mostrar el estado activo del botón cuando el usuario hace clic en el usuario:

.NAV-BTN: Active
Color de fondo: Blueviolet;
Color: Whitesmoke;
Font-Weight: Bold;

Aquí:

• "color de fondo"Cambia el color de fondo del elemento.
• "color"Especifica el color de la fuente.
• "pescado"Define el grosor de la fuente.

Producción

La salida anterior verifica que el estilo de los botones cambia cuando los usuarios hacen clic en. Sin embargo, no mantienen su estado activo y se desvanecen después del clic.

Cómo mantener CSS: estilo activo después de hacer clic en un botón?

JQuery se puede usar para mantener el estado activo de los botones. Para este propósito, agregue los estilos dentro de la clase "NAV-BTN"Y agregar la clase".activo" con eso:

.NAV-BTN.activo
Color de fondo: Blueviolet;
Color: Whitesmoke;
Font-Weight: Bold;

código jQuery

En el ""Etiqueta Agregar el siguiente código:

ps.nav-btn ").en ("hacer clic", function ()
ps.nav-btn ").removeclass ("activo");
$ (esto).addClass ("activo");
);

Aquí está la descripción del código anterior:

• El "ps"¿Es la función de acceso directo del"GetElementByid".
• El ".NAV-BTN"¿Es la clase a la que se accede a través de esta función.
• El ".ON (Haga clic, función ()"Denota la función que se activará en el clic del botón.
• El "ps.nav-btn ”).removeclass ("activo");"Elimine los estilos de cada botón e implementa los estilos cuando se haga clic en el botón.
• "$ (esto).addClass ("activo");"Significa que los estilos solo deben aplicarse a ese botón que se hace clic actualmente.

Producción

Eso es todo! Has aprendido con éxito a mantener CSS ":activoEstilo después de un botón Haga clic.

Conclusión

Para mantener el estado activo de un botón, se utilizan métodos jQuery. Para este propósito, primero, acceda al botón utilizando el "ps" método. Luego, defina la función para aplicar los estilos de estado activo al hacer clic en el mouse. Implementar el controlador de eventos y la función. La función primero eliminará los estilos de cada botón. Entonces, "$ (esto)"Se usa con el": addClass ()"Para mantener el estado activo del botón. Este artículo ha demostrado el procedimiento para mantener CSS: estilo activo después de hacer clic en un botón.