Fügen Sie die active-Klasse für Menüpunkt

Verwendung von Bootstrap 4 v6, ich habe folgende navigation:

Ich versuche zum einrichten der aktiven-Klasse auf den ausgewählten Menüpunkt, aber nichts, was ich getan habe, hat funktioniert.

Der nächstgelegene, dass ich gekommen bin, ist mit diesem code:

JS:

$(document).ready(function() {
$('.navbar ul li').click(function(e) {
    $('.navbar ul li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});
});

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">DCH</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.php">Home</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Feline Diabetes</a>
                <div class="dropdown-menu bg-inverse navbar-inverse">
                    <a class="dropdown-item" href="treatment.php">Treatment</a>
                    <a class="dropdown-item" href="insulin.php">Insulin and Testing</a>
                    <a class="dropdown-item" href="relatedconditions.php">Related Conditions</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="nutrition.php">Nutrition</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="protocol.php">Protocol</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="links.php">Links</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://diabeticcathelp.com/forum" target="_blank">Forum</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.php">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

Es ändert die active-Klasse auf den angeklickten Menü-Eintrag, aber es ändert nicht die Seiten. Es auch funktioniert nicht auf die Untermenüpunkte, obwohl ich denke, dass ich brauchen würde, unterschiedlichen code, um zu sehen, wenn diese bestimmte Objekte angeklickt wurden und ich noch nicht so weit gekommen. Als erstes möchte ich, vorbei die Seite wechseln-Problem. Wenn ich entfernen Sie die e.preventDefault() Anruf, dann die Seiten Verschiebung, aber die Menüpunkte werden nicht verändert aktiv.

Irgendwelche Ideen auf, wie könnte ich diese Arbeit machen?

Update. Ich habe diese arbeiten, die für alles außer für die Untermenüs. Ich bin mit dem folgenden code, der angepasst ist, aus einer der Antworten in diesem thread:

$(document).ready(function () {
    var listItems = $('.navbar ul li');

    $.each(listItems, function (key, litem) {
        var aElement = $(this).children(litem)[0];

        if(aElement == document.URL) {
            $(litem).addClass('active');
        }
    });
});

Das einzige, was mir fehlt ist das hinzufügen von aktiven auf die Untermenüpunkte. Dieser code nimmt sich das erste Kind-Element von .navbar ul li Elemente und machen den Vergleich zu sehen, wenn ich das hinzufügen der aktiven Klasse. Ich weiß, dass wenn ich eine li mit einer Klasse .nav-Element .dropdown-Liste, die ich brauche, um Schritt über die Kinder der .dropdown-Menü, und überprüfen Sie es. Ich bin einfach nur kämpfen, um herauszufinden, wie. Ich wirklich brauchen, um einen JQuery-Kurs.

Weiter Bearbeiten:

Nach dem spielen mit diesem für ein paar Stunden, habe ich eine Lösung, die funktioniert für das, was ich versuche zu tun:

var setSubItemParent = false;

$(document).ready(function () {
    var listItems = $('.navbar ul li');

    $.each(listItems, function(key, litem) {
        iterateLinks(litem);
    })
});

function iterateLinks(liItem) {
    var divchildren = $(liItem).children('div');

    setSubItemParent = false;

    /* If there are div children, iterate them */
    if (divchildren.length > 0) {
        iterateLinks(divchildren[0]);

        /* If an item was set and we're in a div, add active to 
           this element as well. */
        if(setSubItemParent) {
            $(liItem).addClass('active');
        }

    }
    else {
        var achildren = $(liItem).children('a');

        /* Run through all a tags and see if they should be active */
        if (achildren.length > 0 ) {
            $.each(achildren, function(key, achild) {
                if (achild.href == document.URL) {
                    $(achild).addClass('active');
                    setSubItemParent = true;
                }
            });
        }
    }
}

Der code läuft durch alle li-Elemente in das Menü und gräbt weiter, wenn es findet, div. Dies ist wahrscheinlich nicht der robusteste Lösung für das problem, aber es funktioniert. Ich bin offen für eine bessere Lösung, jedoch.