Hi i am trying to set the css class active to the active tab but no matter what i try it dont work can some one tell me what i do wrong and what to do.

Here is my code and the codes i have ben trying to get to work

  //Jquery code is at the bottom 
    <!-- Navigation -->
    <div id="topheader">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <button class="navbar-toggler" 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>
                <div class="">
                    <div>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active" id="top">
                                    <a class="nav-link" href="/">Forsiden <span class="sr-only">(current)</span></a>
                                </li>


                                                                //HERE IS MY MENU ITEM
                                @{
                                    var selection = Model.Content.Site().Children().Where(x => x.IsVisible());
                                }

                                @foreach (var item in selection)
                                {
                                    <li class="nav-item">


                                        <a href="@item.Url" class="nav-link">@item.Name</a>
                                    </li>
                                }


                                                                    //HERE IS MY DROPDOWN MENU
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Undervisning
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                                        @{
                                            var selection1 = Model.Content.Site().FirstChild("undervisning").Children().Where(x => x.IsVisible());
                                        }

                                        @foreach (var item in selection1)
                                        {
                                            <a href="@item.Url" class="dropdown-item">@item.Name</a>
                                            <div class="dropdown-divider"></div>
                                        }




                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </nav>
    </div>

I have also tryit this razor code without luck

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{ var selection = CurrentPage.Site(); }

@Traverse(selection)


@helper Traverse(dynamic node)
{
var maxLevelForSitemap = 3;

var selection = node.Children.Where("Visible").Where("Level <= " + maxLevelForSitemap);

if (selection.Any())
{
        <ul>
            @foreach (var item in selection)
            {
                string cssClass = @item.Id != CurrentPage.Id ? "" : "current";

                <li class="@cssClass">
                    <a class="nav-link" href="@item.Url">@item.Name</a>

                    @Traverse(item)
                </li>
            }
        </ul>
}
}

I have tryit many things to get it to work and here is some jquery i have try to use but it dont work Why??

$('.navbar-nav li a').click(function (e) {
    //alert(e.currentTarget,"//",e.target,"//",this);
    e.stopPropagation();
    $('.navbar-nav li a').removeClass('active');
    $(this).addClass('active');
});