Question

你能告诉我如何通过从tab-navs外面点击一个按钮再次启动Bootstrap First Tab吗？

我已经尝试了这个

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

JS：

$('#btnReview').click(function(){
  $(".tab-content").removeClass("active");
  $(".tab-content:first-child").addClass("active");
});

和

$('#btnReview').click(function(){
  $(".nav-tabs").removeClass("active");
  $(".nav-tabs:first-child").addClass("active");
});

但两人都没有做好这份工作！感谢

Answer 1

您可以使用.tab()方法，如下所示：

$('#btnReview').click(function(){
    $('#tab1').tab('show')
});

我直接在标签<a>中添加了ID，但您可以使用其他选择器：

<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab" id="tab1">Home</a></li>

来自Bootstrap Tab docs：

<强> $（）。标签

激活制表符元素和内容容器。标签应该有data-target或href定位到DOM中的容器节点。

Answer 2

保存成功后，Twitter Bootstrap选择第一个标签

$(".nav-tabs >li").removeClass("active");
$(".nav-tabs >li:first-child").addClass("active");

Answer 3

我通过使用类似的案例解决了这个问题：

explorer.exe

Bootstrap 3通过单击外部按钮激活第一个选项卡

3 个答案: