Show Dynamically Added Navlinks When Added In Bootstrap Navbar

I am new to Bootstrap, and can't seem to figure this out, i have navbar being used as javascript tab functionality of Bootstrap, which can have dynamically added and removeable nav

Solution 1:

It doesn't look like you're using the standard Bootstrap nav/nav-tabs markup. If I were you I would simplify adding new tabs and tab content like this...

Have a single function that creates the new tab, tab content and then makes it active. You can use the tab('show') method to activate the newly created tab:

$('#btnAdd').click(function (e) {
    var nextTab = $('#tabs li').size()+1;

    // create the tab
    $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

    // create the tab content
    $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');

    // make the new tab active
    $('#tabs a:last').tab('show');
});

Dynamic Bootstrap Tabs Demo

Then you just need to customize it a little for your images.