.active Prosty problemy. Mamy pasek nawigacyjny stworzony na podstawie styli bootstrap.

Jak ustawić na wybranym przycisku nawigacyjnym klasę CSS active. Klasa ta podkreśli przycisk. Naturalnie chcemy podkreślić przycisk nawigacyjny, jeśli znajdujemy się na stronie, do której on referuje.

Zazwyczaj powtarzające się elementy strony są wydzielone do pojedynczych plików. Poza tym określenie ręcznie klasy “active”, gdy ten pasek nawigacyjny powtarza się na każdej stronie, wydaje się słabym rozwiązaniem.

Mam więc następujący pasek nawigacyjny. Lista linków ; element ul ma klasę "linkList".

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-collapse">
            <ul class="nav navbar-nav linkList">
                <li><a href="Index.html">Start</a></li>
                <li><a href="Contact.html">Kontakt</a></li>
                <li><a href="/Page/AnoterPage.html">Inna strona</a></li>
            </ul>
        </div>
    </div>
</nav>

Ten problem można rozwiązać funkcją JavaScript.

Funkcja ta w pętli sprawdzi wszystkie elementy w pasku nawigacyjnym. Jeśli adres w linku jest taki sam, jak część adresu strony wtedy do tego elementu dodajemy klasę "active".

$(function () {
    $.each($('.linkList li'), function (key, value) {

        var el = $(value);
        var link = el.find('a').attr('href');
        var dif = link.localeCompare(window.location.pathname);
        var dif2 = ("/" + link).localeCompare(window.location.pathname);

        if (dif == 0 || dif2 == 0) {
            el.addClass('active');
        }

    });
});

Adres strony minus domena strony zawiera się w zmiennej globalnej "window.location.pathname".

Funkcja "localCompare" porównuje napisy nie zależnie od wielkości znaków.

Na początku adresu zawartego w atrybucie "href" dodaje znak slash. Sprawdzam, czy link ze slashem lub bez zgadza się z wartością zmiennej globalnej “window.location.pathname".

Oto działanie skryptu w praktyce.

hhhhh