data-toggle ="tab",在页面加载时激活第二个选项卡

Question

我知道这个问题已经被问过,我已经完成了之前的问题,但不知怎的,对我来说没什么用,所以我想我应该发布这个.

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

将类设置为第二个选项卡的"Tab Pane Active"不起作用.

<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