js Активный пункт меню js css bootstrap

Статус
В этой теме нельзя размещать новые ответы.
Сообщения
316
Реакции
131
Помог
4 раз(а)
Собственно сабж, не добавляется класс стиля в активную вкладку меню
js
JavaScript:
$(function () {
    $('.nav a').each(function () {
        var location = window.location.href;
        var link = this.href;
        if(location == link) {
            $(this).parent("li").addClass('active-link');
        }
    });
});
стили
CSS:
.menu {
    padding-bottom: 0;
    top: 0;
    margin-top: 15px;
}
.navbar-myinverse {
    border: 1px solid #191919;
    background: #232323;
    box-shadow: 0px 1px 0px 0px #292929, 1px 0px 0px 0px #292929, -1px 0px 0px 0px #292929;
}
.nav > li > a:focus, .nav > li > a:hover {
    color: #fff;
    background-color: #ff000017;
    border-radius: 4px;
}
.active-link {
    color: #fff;
    background-color: #ff000017;
    border-radius: 4px;
}
.menu-container {
    /* padding-right: 15px; */
    /* padding-left: 15px; */
    margin-right: auto;
    margin-left: auto;
}
блок меню
HTML:
<div class="menu">
<nav class="navbar navbar-myinverse">
<div class="menu-container">
<ul class="nav navbar-nav">
<li><a href="/">Link 0</a></li>
<li><a href="/link1">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<li><a href="/link3">Link 3</a></li>
<li><a href="/link4">Link 4</a></li>
<li><a href="/link5">Link 5</a></li>
</ul>
</div>
</nav>
</div>
К первой ссылке класс добавляется, к последующим не хочет
 
В этой теме было размещено решение! Перейти к решению.
Сообщения
48
Реакции
151
Ну так прологируй чему равны location и link. Логично же, что условие не выполняется.
 
Сообщения
2,491
Реакции
2,790
Помог
61 раз(а)
alabamaster1337, свойство href в ссилке не обьязательно должно соответсвовать location. Можна в ссилке получить полный path от корня. Но имхо активный класс лучше присваивать на этапе рендеринга на бэкенде
 
Статус
В этой теме нельзя размещать новые ответы.

Пользователи, просматривающие эту тему

Сейчас на форуме нет ни одного пользователя.
Сверху Снизу