Почему не работает active? Что за магия?

Question

[barakuda1]

<li class="services_button"><a href="#" class="main-button dots active" onclick="currentSlide(1)">Кнопка 1</a></li>

Присутствует classname "active", но кнопка не является активной.
При этом, имея js код:

var slideIndex = 1;
        showSlides(slideIndex);

        // Next/previous controls
        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        // Thumbnail image controls
        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("my-slider-item");
            var dots = document.getElementsByClassName("dots");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
             for (i = 0; i < dots.length; i++) {
                 dots[i].className = dots[i].className.replace(" active", "");
             }
            slides[slideIndex-1].style.display = "block";
             dots[slideIndex-1].className += " active";
            event.preventDefault();
        }

По нажатию, кнопка просто перезаписывает значение в точно такое же, но при этом, она становится активной.
Что за магия?!

Comments

[Алексей Ярков]

dots[i].className = dots[i].className.replace(" active", "")

Руки бы оторвать за такое ))
https://developer.mozilla.org/ru/docs/Web/API/Elem... - читайте и просвещайтесь ))