Proste zakładki z użyciem JavaScript - kliknięcie w aktywną zakładkę powoduje jej 'zaznaczenie' (biała kropkowana ramka)

Question

Cześć,

klient zażyczył sobie zakładki, których nie znalazłem nigdzie w repo WordPressa, stąd też trzeba było ogarnąć temat samemu. Kod to nic specjalnego:

HTML:

<div id="co-nas-wyroznia-nav-tab" class="co-nas-wyroznia-nav">
    <a class="co-nas-wyroznia-active" href="#zysk">Zysk</a>
    <a href="#pewnosc">Pewność</a>
</div>

JS:

function onTabClick(event) {
    var activeTabs = document.querySelectorAll('.co-nas-wyroznia-active');

    activeTabs.forEach(function (tab) {
        tab.className = tab.className.replace('co-nas-wyroznia-active', '');
    });

    // aktywuj zakladke
    event.target.className += ' co-nas-wyroznia-active';
    document.getElementById(event.target.href.split('#')[1]).className += ' co-nas-wyroznia-active';
    
    event.preventDefault();
}

var element = document.getElementById('co-nas-wyroznia-nav-tab');

element.addEventListener('click', onTabClick);

Wszystko działa tak jak powinno, poza tym, że po aktywowaniu zakładki w elemencie nav pojawia się dziwne zaznaczenie. Dlaczego?

Comments

A czy mógłbyś dorzucić jeszcze style do tego menu? Na 1 rzut oka pomyślałem że to może być outline (możesz sprawdzić, ustawiając outline na none), natomiast najczęściej jest on niebieski.

---

Dzięki brachu, outline:none pomogło :)