• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

focus(), :focus, co zrobić, żeby focus nie znikał gdy kliknę w coś innego?

VPS Starter Arubacloud
0 głosów
170 wizyt
pytanie zadane 19 listopada 2017 w HTML i CSS przez Damian Jacyna Początkujący (260 p.)

Witam,
mam dany efekt ustawiony na :focus w cssie. Klikam w button, wszystko ładnie pięknie, klikam w inny button, wszystko jest tak jak ma być. Ale gdy dany button jest kliknięty a kliknę gdziekolwiek indziej na stronie, to button nie jest już uznawany za sfocusowany i znika jego efekt. Jak rozwiązać ten problem?

Tak wygląda to w CSS:

.menu:focus{
    border-bottom: solid 6px #ffffff;
    box-shadow: none;
}

Natomiast utworzyłem też funkcję w JS, aby focusowała startowy button przy załadowaniu strony. Focus() również działa podobnie i nie rozwiązuje problemu powyżej.

function MyFocus() {
        document.getElementById("startFocus").focus();
    }

 

1 odpowiedź

+1 głos
odpowiedź 19 listopada 2017 przez pablop76 VIP (123,240 p.)
wybrane 19 listopada 2017 przez Damian Jacyna
 
Najlepsza
Witam. Dodać klasę np: active
komentarz 19 listopada 2017 przez Damian Jacyna Początkujący (260 p.)
Mógłbyś trochę bardziej sprecyzować odpowiedź? Gdy używam active zamiast focus to po kliknięciu na button, efekt nie pojawia się. Dodam, że używam Bootstrapa. Gdy, używam active oraz focus to efekt jest ten sam co przy samym focus.
komentarz 19 listopada 2017 przez pablop76 VIP (123,240 p.)

Mam na myśli dodanie klasy do klikniętego przycisku w momencie kliknięcia za pomocą js lub jq.

np: tak

$(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $(this).addClass('active');                
        });            
    });

 

komentarz 19 listopada 2017 przez Damian Jacyna Początkujący (260 p.)
Mógłbyś mi to wytłumaczyć na przykładzie mojej strony i mojego kodu? Udało mi się zrobić chyba, że przechodzą przyciski w stan active, ale niestety jak kliknę następny to ten poprzedni też jest active.

Tutaj wersja bez próbowania Twojej funkcji (wersja wyjściowa):

http://orfi.uwm.edu.pl/~s135932/
1
komentarz 19 listopada 2017 przez pablop76 VIP (123,240 p.)

w twoim przypadku byłoby coś takiego

$(document).ready(function () {
        $('nav > button').click(function (e) {
            e.preventDefault();
            $('nav > button').removeClass('active');
            $(this).addClass('active');                
        });            
    });

 

komentarz 19 listopada 2017 przez Damian Jacyna Początkujący (260 p.)
Super! :) Dokładnie o taki efekt mi chodziło. Dziękuję bardzo :)

Podobne pytania

+1 głos
2 odpowiedzi 639 wizyt
pytanie zadane 11 lipca 2021 w HTML i CSS przez Kytrap Początkujący (390 p.)
0 głosów
2 odpowiedzi 609 wizyt
0 głosów
1 odpowiedź 214 wizyt

92,834 zapytań

141,778 odpowiedzi

320,826 komentarzy

62,164 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...