Bootstrap — как переключать класс active?

Question

[Moe Green]

Добрый день!

Я новичок в Bootstrap - учу по мере сил.

Сверстал сайтик, у которого имеется навигация ( navbar ). Задача стоит - сделать класс .active в этом меню переключаемым.

На CodePen задача мною успешно выполнена и вот пример готового кода - codepen.io/gearmobile/pen/bByZdG

То же самое меню с таким же кодом, запущенное локально из-под WebStorm ( у этой IDE есть встроенный локальный сервер ) - не работает переключение класса .active.

Уже устал искать решение и прошу подсказки.

P.S.

С jquery все в порядке - он работает. И сервер ( WebStorm ) работает. Это у меня голова не работает ((

Прошу прощения за неточность, но я запутал самого себя. Кусок готового navbar имеет такой вид:

...
<div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div><!--/.nav-collapse -->

В данном случае переключение класа .active по пунктам меню - это забота уже сервера, на котором будет работать готовый bootstrap?

У себя на локальном сервере не получилось заставить работать такое переключение (

Comments

[Yustas Alexu]

Если не работает с сервером вебшторма, не повод ли это задуматься о смене веб-сервера?

[Moe Green]

Yustas Alexu: и что вы посоветуете? система - Linux. XAMPP?

[Yustas Alexu]

Valery Semenencko: я бы посоветовал nginx. Вот здесь указана простейшая конфигурация для localhost stackoverflow.com/questions/11061788/correct-confi...

[Руслан Полин]

Valery Semenencko: Я бы рекомендовал связку nginx + apache.

[Михаил]

А я бы посоветовал смотреть в консоль и дебажить js

[Руслан Полин]

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

Answer 1

[Moe Green]

нашел решение данного вопроса, но что-то мне подсказывает, я заморочился какой-то ерундой )) решение ниже -

$( document ).ready( function () {
    var url = window.location.href.substr( window.location.href.lastIndexOf( '/' ) + 1 );
    $( '.navbar-nav a' ).each( function () {
        if( $( this ).attr( 'href' ) === url || $( this ).attr( 'href' ) === '' ) {
            $( this ).parent( 'li' ).addClass( 'active' );
        }
    });
});

Answer 2

[Serj-One]

Что-то мне подсказывает, что локально не подключена JQuery. А вообще, смотри ошибки в консоли браузера.
Менять сервер, что неоднократно посоветовали выше, - абсурд.