title: show dynamically added navlinks when added in bootstrap navbar
body: <p>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-links, i have used images rather than default nav-links, my question is when i add the dynamic nav-link, it should become the active class and show its relevant content, at the moment i have to click to make it active, and if i remove any nav-link, the content remains same, is there a way to achieve this function</p>
  
  <p>The html is:</p>
  
  <pre><code>&lt;ul id="nav-tabs" data-tabs="tabs" &gt;
            &lt;li class="test" &gt;&lt;img src="assets/img/button_home_selected3.png" class="hover" width="83" /&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The tabs are added when this button is clicked:</p>
  
  <pre><code>&lt;a href="#" class="plus" title="Click to add Tabs" &gt;&lt;img src="assets/img/icon_plus.png"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The li are added using</p>
  
  <pre><code>var counter = 1;    
      $('.plus').click(function(e) {
          e.preventDefault();
          var li_count = $('#nav-tabs').find("li.test").length;
          if (li_count &lt;= 3)
              if(counter &lt;= 3){
                  $('#nav-tabs').append('&lt;li class="test" &gt;&lt;img src="assets/img/button_home_selected3.png" class="hover" width="83" /&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;button type="button" class="close"&gt;&amp;times;&lt;/button&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;');
                  } else { alert("Only 3 Tabs Allowed!")};
  </code></pre>
  
  <p>The content of tabs are added similarly later;</p>
  
  <p>The active class in tabs is toggled using</p>
  
  <pre><code>$("#nav-tabs").on("click", "a", function(e) {
          e.preventDefault();
          $(this).tab('show');
          $('li.test').each(function() {
              if($(this).hasClass('active'))
              {
                  //Active class is applied
                  $(this).children().children().closest("img").attr("src", "assets/img/button_home_selected3.png");
                  $(this).find("button").show();
              }
              else
              {
                  $(this).children().children().closest("img").attr("src", "assets/img/button_home_plain2.png");
                  $(this).find("button").hide();
              }
  
  
          });
  </code></pre>
  
  <p>The li are closed using button close in the new nav-links as:</p>
  
  <pre><code>$('.close').click(function(e) {
      e.preventDefault();
      var panelId = $(this).closest("li").remove().attr("aria-controls");
      $("#tab" + panelId).remove();
      $("#nav-tabs").children("li").last().addClass("active");
  
      if(counter &lt;= 1){
          counter = 1;
          }else if (counter &gt; 1) {
              counter--;
          }
          return false;
  })
  </code></pre>