我是Bootstrap的新手，似乎无法解决这个问题，我将导航栏用作Bootstrap的javascript标签function，它可以动态添加和删除导航链接，我使用的是图像而不是默认的导航链接，我的问题是，当我添加动态导航链接时，它应该成为活动类并显示其相关内容，此时我必须单击以使其处于活动状态，如果我删除任何导航链接，内容保持不变，有没有办法实现这个function
html是：
Home
单击此按钮时会添加选项卡：
li是使用添加的
var counter = 1; $('.plus').click(function(e) { e.preventDefault(); var li_count = $('#nav-tabs').find("li.test").length; if (li_count <= 3) if(counter <= 3){ $('#nav-tabs').append('Home 标签的内容后面添加类似;
选项卡中的活动类是使用切换的
$("#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", "https://stackoverflow.com/questions/14907997/show-dynamically-added-navlinks-when-added-in-bootstrap-navbar/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(); } });
使用新导航链接中的按钮关闭li，如下所示：
$('.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 1) { counter--; } return false; })
看起来您并没有使用标准的Bootstrap nav / nav-tabs标记。 如果我是你，我会简化这样的新标签和标签内容的添加 …
有一个function可以创建新选项卡，选项卡内容，然后使其处于活动状态。 您可以使用tab('show')方法激活新创建的选项卡：
$('#btnAdd').click(function (e) { var nextTab = $('#tabs li').size()+1; // create the tab $('Tab '+nextTab+' ').appendTo('#tabs'); // create the tab content $('tab' +nextTab+' content').appendTo('.tab-content'); // make the new tab active $('#tabs a:last').tab('show'); });
然后你只需要为你的图像定制一点。