Как добавить для li класс active при смене пункта меню?

Question

[Евгений]

Есть вот такая менюшка

<div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="<?= \yii\helpers\Url::to(['/site/index'])?>">На сайт</a></li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Управление категориями <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="<?= \yii\helpers\Url::to(['category/index'])?>">Список категорий</a></li>
                                <li><a href="<?= \yii\helpers\Url::to(['category/create'])?>">Добавить категорию</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Управление докторами <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="<?= \yii\helpers\Url::to(['doctors/index'])?>">Список врачей</a></li>
                                <li><a href="<?= \yii\helpers\Url::to(['doctors/create'])?>">Добавить врача</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Управление талонами <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="<?= \yii\helpers\Url::to(['cards/index'])?>">Список всех талонов</a></li>
                                <li><a href="<?= \yii\helpers\Url::to(['cards/indexorder'])?>">Список заказанных талонов</a></li>
                                <li><a href="<?= \yii\helpers\Url::to(['cards/create'])?>">Добавить талон</a></li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Вакансии<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="<?= \yii\helpers\Url::to(['vacancies/index'])?>">Список всех вакансий</a></li>
                                <li><a href="<?= \yii\helpers\Url::to(['vacancies/response'])?>">Список откликов на вакансии</a></li>
                                <li><a href="<?= \yii\helpers\Url::to(['vacancies/create'])?>">Добавить вакансию</a></li>
                            </ul>
                        </li>

                        <li><a href="<?= \yii\helpers\Url::to(['/site/logout'])?>">Выход</a></li>
                    </ul>
                </div>

Пока что класс Active стоит только на одной странице. Но как сделать чтобы при смене страницы добавлялся к li класс active ?

Answer 1

[Denis]

Ну у Вас крепкий хардкод
я бы на вашем месте чтоб не убивать вьюху миллионами условий, написал бы JS который будет пробегаться по менюхе и сравнивать текущий урл с урлами линков

Comments

[Евгений]

Это просто когда-то был шаблон и там это сделано было от балды. Т е просто было 100500 индекс страниц и на каждой индекс странице просто стоял свой класс Active.

В моих же реалиях он используется в MVC-проекте. И так как хедер и футер являются неизменяемым содержимым это вынесено отдельно. А Контент выводится отдельно посредством вьюх.

Но у меня не сделаны ЧПУ, а менюшку я скинул из админки. И там ссылки вот такого вида
index.php?r=admin/vacancies/index

[Denis]

$('.navbar-nav li a').each(function() {
    if($(this).attr('href')==window.location.pathname){
		$(this).parent().addClass('active');
	}
});

написал на коленке суть примерно такая

[Евгений]

sidni, Я вот такое пробовал

$(function () {
        $('.menu a').each(function () {
            var location = window.location.href;
            var link = this.href;
            if(location == link) {
                $(this).addClass('active');
            }
        });
    });

Но оно добавляет active тегу a, а не лишке

[Евгений]

О, добавление Parent решает ситуацию) Спасибо

[Denis]

Вам надо написать как у меня parent().addClass

[Антон]

sidni, Лучше бы, наверное, все таки не на JS, а в пыхе непосредственно, где цикл менюхи, через $_SERVER

[Евгений]

sidni, Жаль что на многоуровневые менюшки не работает)

Допустим

<li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Управление категориями <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="<?= \yii\helpers\Url::to(['category/index'])?>">Список категорий</a></li>
                                <li><a href="<?= \yii\helpers\Url::to(['category/create'])?>">Добавить категорию</a></li>
                            </ul>
                        </li>

Оно Active добавляет пункту списка. А хотелось бы чтобы добавляло основному

[Denis]

Антон, в представленном шаблоне нет цикла и да и сложновато его будет сделать поскольку это меню неоднозначное и может собирать любые ссылки по сайту

[Denis]

Евгений,
Может поробывать
$(this).parents('li').addClass('active');

[Антон]

sidni, То что обработчика меню нету - большой минус, конечно, статичная менюха здесь выглядит как не пришей...

[Евгений]

sidni, Работает) Ну стрелочку я уже сам воскрешу, спасибо. Она походу должна становиться белой при смене класса на active

[Froggyweb]

100500 индекс страниц и на каждой индекс странице просто стоял свой класс Active.

Это делал скрипт на сервере. А вы делаете пятиколесный велик с квадратными колесами

[Евгений]

Froggyweb, Это не делал скрипт серверный. Это шаблон такой был.

Answer 2

[mindgrow]

Добавляй к нужному li айдишник. И для каждой странички делай отдельный файл js.

Например для страницы вакансий делаешь файл all-vacancy-menu.js в который вставляешь код

$(function() {
    var menuItem = $('#left-sidebar-menu-vacancy');
    menuItem.addClass('active');
    var subMenuItem = menuItem.find('#left-sidebar-menu-vacancy-all');
    subMenuItem.addClass('active');
});