从外部链接到Bootstrap选项卡 – 如何将选项卡设置为“活动”？
我有一个带有3个不同内容选项卡的Bootstrap“选项卡”导航。 除了我想链接到OUTSIDE选项卡导航中的一个选项卡之外，它的工作方式非常完美。 这意味着当有人单击选项卡窗口外的链接时，它应设置为“活动”该选项卡并显示内容。
现在，它正确显示该选项卡的内容，但该选项卡未设置为“活动”。 我如何实现这一点，以便它像一个人点击一样“活跃”？
这是代码：
Home Content Profile Content Messages Content Profile Link From Outside 我做了一个jsFiddle来更好地展示它： http ： //jsfiddle.net/fLJ9E/
非常感谢您的任何帮助或提示:)
你可以做一个小技巧来实现这个目标：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = this.href.split('#'); $('.nav a').filter('[href="#'+target[1]+'"]').tab('show'); })
我遇到了同样的问题，并选择在正确的选项卡上触发click事件，然后让Bootstrap执行所需的操作。
$('#link').on('click', function(){ $('.nav-tabs a[href="#profile"]').click(); });
最简单的答案是这样做：
Profile Link From Outside
然后在javascript中添加：
$(document).ready(function () { $("#profilelink").click(function () { $('.nav a[href="#profile"]').tab('show'); }); });
这将使用jquery选项卡插件的内置方法更改顶部的内容视图和活动按钮。 如果你想在标签区域之外添加更多按钮，那么你可以使它更通用，例如。
Profile Link From Outside $(document).ready(function () { $(".outsidelink").click(function () { $('.nav a[href="' + $(this).attr("href") + '"]').tab('show'); }); });
在我做的小技巧之下，对我有用。
我可以调用网页将bootstrap pill id添加到URL。
例如，调用mypage.html＃other_id将显示匹配#other_id的药丸
... ...
这里是JQuery代码：
$(document).ready(function(){ //Manage hash in URL to open the right pill var hash = window.location.hash; // If a hash is provided if(hash && hash.length>0) { // Manage Pill titles $('ul.nav-pills li a').each(function( index ) { if($(this).attr('href')==hash) $(this).parent('li').addClass('active'); else $(this).parent('li').removeClass('active'); }); // Manage Tab content var hash = hash.substring(1); // Remove the # $('div.tab-content div').each(function( index ) { if($(this).attr('id')==hash) $(this).addClass('active'); else $(this).removeClass('active'); }); } });
编辑：我的代码并不完全符合您的需要，但您可以更新它以满足您的需求。 告诉我你是否需要解释
可能需要在添加外部链接时添加/减去类。 它根本没有绑定到标签。
$(".outside-link").click(function() { $(".nav li").removeClass("active"); $($(this).attr("data-toggle-tab")).parent("li").addClass("active"); });
工作小提琴： http ： //jsfiddle.net/Bp2jm/