Подсветка активного пункта меню, доработка?

Question

[Сергей Филиппов]

Разметка

<div class="menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contacts">Contacts</a></li>
    </ul>
</div>

Код

$(document).ready(function () {
    var location = window.location.href;
   
    $('.menu li').each(function () {
        var link = $(this).find('a').attr('href');
   
        if (location.indexOf(link) !== -1)
        {
            $(this).addClass('active');
        }
    });
});

В моем случае, подсвечивается основная ссылка в и все вложенные в нее.


Все хорошо работает. Однако вместе с этим всегда подсвечивается главная страница "/". Хотелось бы узнать, можно ли сделать правило, чтобы главная подсвечивалась только на главной "/" а на всех остальных не подсвечивалась?

P.S. Я плохо ориентируюсь в JS, поэтому можно ответ целым кодом, чтобы не гадать куда вставить функцию?

Answer 1

[wonderingpeanut]

как вариант
window.location.pathname.startsWith(url)

Comments

[Сергей Филиппов]

Если есть возможность, то сделайте целым кодом, так как не ориентируюсь в JS. Спасибо за понимание

[wonderingpeanut]

Сергей Филиппов,

const pageUrl = window.location.pathname;
... // форыч и поиск всех ссылок
if (pageUrl.startsWith(link)) {
  ... // добавляешь класс к элементу
}

[Сергей Филиппов]

wonderingpeanut,

$(document).ready(function () {
    const pageUrl = window.location.pathname;
   
    $('.menu li').each(function () {
        var link = $(this).find('a').attr('href');
   
        if (pageUrl.startsWith(link))
        {
            $(this).addClass('current');
        }
    });
});

Также, главная светится везде