twitter-bootstrap 在 Twitter 引导程序中重新加载当前活动选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15113157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
reloading current active tab in twitter bootstrap
提问by Alejandro Montenegro
I was following this recommendationabout how to be able to reload current active tab by using:
我下面的这一建议如何能够通过使用重新加载当前激活的标签：
$('#tab-loaded-content').load($('li.active a[data-toggle="tab"]').attr('href'));
But when I tried this the result was that it loads the initially active tab (the one defined in my html as active) and not the current active tab. So I'm looking for some help to figure out how to do this.
但是当我尝试这样做时，结果是它加载了最初的活动选项卡（在我的 html 中定义为活动的选项卡）而不是当前的活动选项卡。所以我正在寻找一些帮助来弄清楚如何做到这一点。
Here is a simplified version of my issue:
这是我的问题的简化版本：
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="tabbable">
<ul id="mainTabs" class="nav nav-tabs">
<li class="active"><a href="#tabWelcome" data-toggle="tab">Home</a></li>
<li><a href="#tabProject" data-toggle="tab">Project</a></li>
<li><a href="#tabEmail" data-toggle="tab">Invite Friends</a></li>
<li><a href="#tabProfile" data-toggle="tab">My Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabWelcome">
welcome
</div>
<div class="tab-pane" id="tabProject">
project
<button id="button" class="btn">Create Project</button>
</div>
<div class="tab-pane" id="tabEmail">
email
</div>
<div class="tab-pane" id="tabProfile">
profile
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script>
document.getElementById("button").addEventListener("click", function() {
$('#mainTabs').load($('li.active a[data-toggle="tab"]').attr('href'));
}, false);
</script>
</body>
</html>
The idea is when clicking on the "project" button on the second tab it should reload that tab, but it reloads the "welcome" tab.
这个想法是当单击第二个选项卡上的“项目”按钮时，它应该重新加载该选项卡，但它会重新加载“欢迎”选项卡。
Any advice appreciated!
任何建议表示赞赏！
回答by cognant
I had to implement a very similar functionality.
我必须实现一个非常相似的功能。
Basically you need to get hold of the current tab 'deactivate' and show it again.
基本上，您需要掌握当前选项卡“停用”并再次显示它。
$(document).on('click', '#refresh', function () {
var $link = $('li.active a[data-toggle="tab"]');
$link.parent().removeClass('active');
var tabLink = $link.attr('href');
$('#mainTabs a[href="' + tabLink + '"]').tab('show');
});
See my jsFiddlefor a working demo.
有关工作演示，请参阅我的jsFiddle。
Notice the demo is using Bootstrap 3 hence the use of the shown.bs.tabevent to show the time at tab load.
请注意，演示使用的是 Bootstrap 3，因此使用shown.bs.tab事件来显示选项卡加载的时间。
