@evgen9586
Backend-dev. Лублу Enterprise и не люблю понты)

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

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

<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 ?
  • Вопрос задан
  • 1377 просмотров
Решения вопроса 1
@sidni
Php Developer
Ну у Вас крепкий хардкод
я бы на вашем месте чтоб не убивать вьюху миллионами условий, написал бы JS который будет пробегаться по менюхе и сравнивать текущий урл с урлами линков
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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');
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы