Stuck on Bootstrap active class for my Nav Menu

Question

Active Class to Current page in Booststrap

I tried all kind of combinations, I succeeded in making menus active but I don't know how to disbale active on one menu while the other menu is active... they are all actice now !

My Javascript:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $(function ($) {
        let url = window.location.href;
        $('li a').each(function () {
            if (this.href === url) {
                $(this).closest('li').addClass('active');
            }
        });
    });
</script>                   

Part of My HTML:

<div class='container-fluid' style='margin-top:70px;'>
    <ul class='nav nav-pills'>
        <li>
            <a href='<?php $base_url ?>/admin/home.php'><span class='glyphicon glyphicon-home'></span>  Home</a>
        </li>
        <li class="dropdown">
           <a class='dropdown-toggle' data-toggle='dropdown' href='<?php $base_url ?>/admin/home.php'>
                <span class='glyphicon glyphicon-book'></span> LSNC Taskforce <span class='caret'></span></a>
            <ul class="dropdown-menu">
                <?php
                    $conn = new  mysqli('localhost', 'root', 'pass', 'mcle') or die("Database  Connection Failed");

                    //Below We are  connectin gto Database and getting all events newer than a Year.
                    $sql = "SELECT  * FROM sessions where `date` > DATE_SUB(NOW(),INTERVAL 1 YEAR) AND  event_type = 'taskforce'";
                    $res =  mysqli_query($conn, $sql);
                    while ($row = mysqli_fetch_array($res)) 
                    {
                        echo "<li><a href='$base_url/admin/sessions.php?idx={$row['event_id']}'>  <span class=''>{$row['pro_title']}<span></a></li>";
                    }
                ?>
            </ul>
        </li>
        <li class="dropdown">
            <a class='dropdown-toggle' data-toggle='dropdown' href='<?php $base_url ?>/admin/home.php'>
                <span class='glyphicon  glyphicon-book'></span> LSNC All Staff <span class='caret'></span>
            </a>
            <ul class="dropdown-menu">
                <?php
                    $sql = "SELECT  * FROM sessions where `date` > DATE_SUB(NOW(),INTERVAL 1 YEAR) AND  event_type = 'allstaff'";
                    $res =   mysqli_query($conn, $sql);
                    while ($row = mysqli_fetch_array($res)) 
                    {
                        echo "<li><a href='$base_url/admin/sessions.php?idx={$row['event_id']}'> <span class=''>{$row['pro_title']}<span></a></li>";
                    }
                ?>
            </ul>
        </li>
    </ul>
</div>

No Error mrssages it just wouldn't select active and current link, it is right now selecting home and the next 3 dropdown as Active... Any Help is alwasy appreciated . Many Thanks ! Ed-

Answer 1

Change your Javascript code to this:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $(function ($) {
        let url = window.location.href;
        $('li a').each(function () {
            if($(this).hasClass('active')){
                $(this).removeClass('active');
            }
            if (this.href === url) {
                $(this).closest('li').addClass('active');
            }
        });
    });
</script>

I hope it will help you.

Answer 2

Thank you Guys, Thank you All especially @Khalid Khan who took time to answer my question.. I finally found the answer:

<script>
$(document).ready(function () {
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function () {
    return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
</script>
Now my dropdown is working[enter image description here][1] as expected. Thank you again, All.
Ed-