Застрял в Bootstrap активный класс для моего меню Nav

Question

Страница «Активный класс на текущую» в Booststrap

Я перепробовал все виды комбинаций, мне удалось сделать меню активными, но я не знаю, как отключить активные в одном меню, когда другое меню активно .. ... все они сейчас на самом деле!

Мой 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>                   

Часть моего 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>

Без ошибок сообщается, что он просто не выбрал бы активную и текущую ссылку, сейчас он выбирает дом и следующие 3 выпадающих списка как активные ... Любая помощь всегда приветствуется. Большое спасибо ! * 1015 Ed-*

Answer 1

Спасибо, ребята, спасибо всем, особенно @Халид Хан, который нашел время, чтобы ответить на мой вопрос .. Я наконец нашел ответ:

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

Answer 2

Измените свой код 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).hasClass('active')){
                $(this).removeClass('active');
            }
            if (this.href === url) {
                $(this).closest('li').addClass('active');
            }
        });
    });
</script>

Надеюсь, это поможет вам.