Jak zachować aktywny styl CSS po kliknięciu przycisku

W CSS pseudoklasa określa określony stan wybranych elementów. Za pomocą tych klas dodaje się kilka właściwości stylizacji w celu stylizacji konkretnej części elementów. Jednak JQuery to konkretna biblioteka JavaScript, która zapewnia metody pomagające w funkcjonalności CSS, takie jak utrzymanie przycisku po kliknięciu.

W tym spisie omówi:

• Co to jest: aktywny w CSS?
• Jak zachować CSS: Aktywny styl po kliknięciu przycisku?

Warunek: Utwórz plik HTML

W HTML dodaj trzy „”Elementy i przypisz każdą„Btn" I "NAV-BTN„Zajęcia:

Dom
O nas
Skontaktuj się z nami

Wyjście

Teraz odnosimy się do głównego tematu naszego postu.

Co to jest: aktywny w CSS?

„„:aktywny„Pseudoklasa wskazuje element, który jest w stanie aktywnym. W CSS ta klasa jest określona z elementami, które mają być stylizowane jako aktywne, takie jak przyciski, linki lub więcej.

Stylowa klasa „Nav-Btn”

„„.NAV-BTN: Active”Służy do dostępu do klasy„NAV-BTN". Ta klasa jest ustawiona na „:aktywny„Pseudoklasa i zastosował następujące właściwości, aby pokazać stan aktywny przycisku po kliknięciu przez użytkownika:

.NAV-BTN: Active
kolor tła: blueviolet;
Kolor: Whitesmoke;
Font-Weight: Bold;

Tutaj:

• "kolor tła„Zmienia kolor tła elementu.
• "kolor”Określa kolor czcionki.
• "grubość czcionki„Definiuje grubość czcionki.

Wyjście

Powyższe dane wyjściowe sprawdza, czy styl przycisków zmienia się po kliknięciu przez użytkowników. Jednak nie utrzymują swojego stanu aktywnego i zanikają po kliknięciu.

Jak zachować CSS: Aktywny styl po kliknięciu przycisku?

JQuery można użyć do utrzymania stanu aktywnego przycisków. W tym celu dodaj style w klasie „NAV-BTN”I dołącz do klasy„.aktywny" z tym:

.NAV-BTN.Active
kolor tła: blueviolet;
Kolor: Whitesmoke;
Font-Weight: Bold;

Kod jQuery

W "”Tag Dodaj następujący kod:

$ (".nav-btn ").on („kliknij”, funkcja ()
$ (".nav-btn ").resuseClass („Active”);
$ (to).addClass („Active”);
);

Oto opis powyższego kodu:

• „„$ ()”To funkcja skrótu„GetElementById".
• „„.NAV-BTN”Czy klasa dostępna za pośrednictwem tej funkcji.
• „„.ON (kliknij, funkcja ()”Oznacza funkcję, która zostanie uruchomiona na przycisku.
• „„$ (”.Nav-btn ”).resuseClass („Active”);”Usuń style z każdego przycisku i zaimplementuj style po kliknięciu przycisku.
• "$ (to).addClass („Active”);”Oznacza, że ​​style należy zastosować tylko do tego przycisku, który jest aktualnie klikany.

Wyjście

Otóż ​​to! Z powodzeniem nauczyłeś się utrzymać CSS ”:aktywny„Styl po kliknięciu przycisku.

Wniosek

Aby zachować aktywny stan przycisku, stosowane są metody jQuery. W tym celu najpierw uzyskaj dostęp do przycisku za pomocą „$ ()" metoda. Następnie zdefiniuj funkcję, aby zastosować styl stanu aktywnego na kliknięciu myszy. Zaimplementuj obsługę zdarzeń i funkcję. Funkcja najpierw usunie style z każdego przycisku. Następnie, "$ (to)”Jest używany z„: addClass ()„Aby zachować aktywny stan przycisku. W tym artykule pokazano procedurę utrzymywania CSS: aktywny styl po kliknięciu przycisku.