data-toggle="tab" ，在页面加载时激活第二个标签

Question

我知道这个问题已经被问过了，我已经完成了之前的问题，但不知何故对我没有任何帮助，所以我想我应该发布这个。

我想在页面加载时突出显示第二个选项卡，当单击特定按钮时，我想突出显示第一个选项卡。

将第二个选项卡的类设置为“选项卡窗格活动”不起作用。

<ul class="nav nav-tabs">
    <li><a href="#search" data-toggle="tab">Search</a></li>
    <li><a href="#home" data-toggle="tab">User Details</a></li>
    <li><a href="#info" data-toggle="tab">More Info</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="search">...Content...</div>
    <div class="tab-pane active" id="home">...Content...</div>
    <div class="tab-pane" id="info">...Content...</div>
</div>

Answer 1

您在第二个选项卡窗格上有一个活动类，最初显示该类，但在实际选项卡 li 上没有。因此，您看到的是第二个选项卡内容，但不是选项卡上的选定状态。你需要改变：

<li><a href="#home" data-toggle="tab">User Details</a></li>

到

<li class="active"><a href="#home" data-toggle="tab">User Details</a></li>

并使用 jQuery 选择选项卡：

// To select the first tab
$('.nav-tabs li:first-child a').tab('show'); 
// To select the second tab
$('.nav-tabs li:eq(1) a').tab('show'); 

如果您愿意（在$(document).ready() 或您正在使用的任何内容中），您可以在页面加载时使用它，尽管最好修复标记。您可以在按钮的事件侦听器中使用它。

请参阅此示例：http://www.bootply.com/kkmcecadLb