Question

I’m new to javascript development so plz bear with me.

I’ve loaded bootstrap nav items from the server using jquery. here is what my js code looks like.

$.ajax({
    url: url,
    success: function (data) {

        $.each(data, function (key, val) {

            if (val.MenuId == 1) {
                $('<li class="active" ><a href="#' + val.Title + '">' + val.Title + '</a></li>').appendTo('#menus');
            } else {
                $('<li ><a href="#' + val.Title + '">' + val.Title + '</a></li>').appendTo('#menus');
            }

        });
    },
    error: function () {
        //alert("Failed to get menus...");
    }
});

I can see the menu items in nav bar, with my default item being set to “active”. but problem is the rest of the css for bootsrap doesn’t seem to work here e.g. when I click on other menu items “active” class doesn’t work any more, which obviously is not the case when i have menu in nav bar from client side. can somebody tell me what I’m doing wrong here. thanks in advance.

Answer 1

Try including:-

 data-toggle="tab"

As an attribute in your anchor tags.

This is what a fully rendered anchor tag would look like.

<a href="#Main" data-toggle="tab">Main</a>