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

data-toggle =“tab”，在页面加载时激活第二个选项卡

1 个答案: