Добавить активный класс навигации на основе URL-адреса онлайн урок.


В идеале вы выводите этот класс со стороны сервера, но если вы не можете...

Предположим, что у вас есть такая навигация:

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/clients/">Clients</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</nav>

И вы находитесь по URL-адресу:

http: yoursite.com о команде

И вы хотите, чтобы ссылка «О программе» получила класс «active», чтобы вы могли визуально указать, что это активная навигация.

$(function() {
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

По сути, это будет соответствовать ссылкам в навигаторе, атрибут href начинается с «about» (или как бы то ни было, что вторичный каталог бывает).