Hvordan holde aktiv CSS -stil etter å ha klikket på en knapp

I CSS spesifiserer pseudoklassen den spesifikke tilstanden til de valgte elementene. Ved hjelp av disse klassene blir flere stylingegenskaper lagt til for å style den spesifikke delen av elementene. Imidlertid er jQuery et spesifikt JavaScript -bibliotek som gir metoder som hjelper med CSS -funksjonalitet, for eksempel å holde knappen aktiv etter å ha klikket på den.

Denne oppskrivningen vil diskutere:

• Hva er: aktiv i CSS?
• Hvordan beholde CSS: Aktiv stil etter å ha klikket på en knapp?

Forutsetning: Opprett en HTML -fil

I HTML, tilsett tre “”Elementer og tilordne hver“btn”Og“Nav-Btn”Klasser:

Hjem
Om oss
Kontakt oss

Produksjon

La oss nå referere til hovedemnet i innlegget vårt.

Hva er: aktiv i CSS?

“:aktiv”Pseudoklasse indikerer elementet som er i en aktiv tilstand. I CSS er denne klassen spesifisert med elementene for å bli stylet som aktiv, for eksempel knapper, lenker eller mer.

Stil “NAV-BTN” -klasse

“.NAV-BTN: Aktiv”Brukes til å få tilgang til klassen“Nav-Btn”. Denne klassen er satt med ":aktiv”Pseudoklasse og brukte følgende egenskaper for å vise knappens aktive tilstand når du klikkes av brukeren:

.nav-BTN: aktiv
bakgrunnsfarge: Blueviolet;
Farge: Whitesmoke;
Fontvekt: fet;

Her:

• “bakgrunnsfarge”Endrer elementets bakgrunnsfarge.
• “farge”Angir skriftfargen.
• “Fontvekt”Definerer skriftens tykkelse.

Produksjon

Ovennevnte utdata verifiserer at knappenes styling endres når de klikker av brukerne. De holder imidlertid ikke sin aktive tilstand og falmer bort etter klikket.

Hvordan beholde CSS: Aktiv stil etter å ha klikket på en knapp?

JQuery kan brukes til å holde den aktive tilstanden til knappene. For dette formålet, legg til stilene i klassen “Nav-Btn”Og legg til klassen“.aktiv" med det:

.Nav-Btn.aktiv
bakgrunnsfarge: Blueviolet;
Farge: Whitesmoke;
Fontvekt: fet;

jQuery -kode

I “”Tag Legg til følgende kode:

$ (".Nav-BTN ").på ("klikk", funksjon ()
$ (".Nav-BTN ").removeClass ("Aktiv");
$ (dette).addclass ("aktiv");
);

Her er beskrivelsen av ovennevnte kode:

• “$ ()”Er snarveisfunksjonen til“getElementById”.
• “.Nav-Btn”Er klassen tilgang til gjennom denne funksjonen.
• “.på (klikk, funksjon ()”Betegner funksjonen som vil bli utløst på knappeklikk.
• “$ (“.Nav-BTN ”).removeClass (“Aktiv”);”Fjern stilene fra hver knapp og implementer stilene når knappen er klikket.
• “$ (dette).addclass (“aktiv”);”Betegner at stilene bare må brukes på den knappen som for øyeblikket er klikket.

Produksjon

Det er det! Du har lært hvordan du opprettholder CSS “:aktiv”Stil etter et knappeklikk.

Konklusjon

For å holde den aktive tilstanden til en knapp, brukes jQuery -metoder. For dette formålet, først, få tilgang til knappen ved å bruke "$ ()”Metode. Definer deretter funksjonen for å bruke aktive tilstandsstiler på museklikk. Implementere hendelsesbehandleren og funksjonen. Funksjonen vil først fjerne stilene fra hver knapp. Deretter, "$ (dette)”Brukes med“: addclass ()”For å holde den aktive tilstanden på knappen. Denne artikkelen har demonstrert prosedyren for å beholde CSS: aktiv stil etter å ha klikket på en knapp.