Jquery add Active class if equal to the current URL

Question

How to modify the following code so that it will only add active class to the exact current url. Currently when the url is http://localhost/traineval/training , it also add active class to http://localhost/traineval/training/all_training

    jQuery(function ($) {
        var path = window.location.href; 
        $('nav li a').each(function () {
            if (this.href == path) {
                $(this).addClass('active');
            }
        });
    });

Here is the html code using blade template in laravel.

                  <ul class="nav">

                    <li class="nav-item">
                        <a class="nav-link" href="{{url('/')}}">
                            <span class="menu-title">Home</span>
                            <i class="mdi mdi-home menu-icon"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url('/')}}/home">
                            <span class="menu-title">Dashboard</span>
                            <i class="mdi mdi-view-dashboard menu-icon"></i>
                        </a>
                    </li>


                    <li class="nav-item">
                        <a class="nav-link" href="{{url('/')}}/training">
                            <span class="menu-title">Trainings</span>
                            <i class="mdi mdi-format-list-bulleted menu-icon"></i>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false"
                            aria-controls="ui-basic">
                            <span class="menu-title">Templates</span>
                            <i class="menu-arrow"></i>
                            <i class="mdi mdi-format-list-bulleted menu-icon"></i>
                        </a>
                        <div class="collapse" id="ui-basic">
                            <ul class="nav flex-column sub-menu">
                                <li class="nav-item"> <a class="nav-link" href="{{url('/')}}/template/default">Default
                                        Templates</a></li>
                                <li class="nav-item"> <a class="nav-link" href="{{url('/')}}/template/personal">My
                                        Templates</a></li>
                                <li class="nav-item"> <a class="nav-link" href="{{url('/')}}/template/featured">Featured
                                        Templates</a></li>
                            </ul>
                        </div>
                    </li>


                    @if(Auth::user()->user_type=='admin')
                    <li class="nav-item">
                        <a class="nav-link" href="{{url('/')}}/training/all_training">
                            <span class="menu-title">All Trainings</span>
                            <i class="mdi mdi-format-list-bulleted menu-icon"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url('/')}}/template/all_template">
                            <span class="menu-title">All Templates</span>
                            <i class="mdi mdi-format-list-bulleted menu-icon"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url('/')}}/home/subscriptions">
                            <span class="menu-title">Subscriptions</span>
                            <i class="mdi mdi-format-list-bulleted menu-icon"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{url('/')}}/home/users">
                            <span class="menu-title">Users</span>
                            <i class="mdi mdi-format-list-bulleted menu-icon"></i>
                        </a>
                    </li>
                    @endif


                </ul>

Using the above javascript, It adds active class to the All Trainings when it should not.

Answer 1

the problem in your code that you are trying to match the href which return the whole url link, instead you have to match only the URL pathname suppose that you have HTML code like that:

<div>
   <nav>
      <li><a href="/traineval/training">training</a></li>
      <li><a href="/traineval/training/all_training">all training</a></li>
   </nav>
</div>

and in your jquery code you can check the URL pathname like that:

jQuery(function ($) {
    var pathname = window.location.pathname; 
    $('nav li a').each(function () {
        if (this.href == pathname) {
            $(this).addClass('active');
        }
    });
});