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

Question

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();
    }

 

Answer 1

Witam. Dodać klasę np: active

Comments

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.

---

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');                
        });            
    });

 

---

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/

---

w twoim przypadku byłoby coś takiego

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

 

---

Super! :) Dokładnie o taki efekt mi chodziło. Dziękuję bardzo :)