How to add active class to li when changing menu item?

Question

JavaScript

There is this menu

<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>

So far, the Active class is only on one page. But how to make it so that when changing the page, the active class is added to li?

Answer 1

Well, you have a strong hardcode, if
I were you, so as not to kill the view with millions of conditions, I would write JS that will run through the menu and compare the current url with the link urls

Answer 2

Add an ID to the required li. And for each page, make a separate js file.
For example, for the vacancies page, you make the all-vacancy-menu.js file into which you insert the code

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