data-toggle ="tab" ，在页面加载时激活第二个标签 [英] data-toggle="tab" , activating second tab on page load

问题描述

我知道已经问过这个问题，我已经回答了前面的问题，但是不知怎么对我没有帮助，所以我认为我应该发布这个问题.

I know this question has already been asked, I have gone through the previous questions but somehow nothing worked for me so I thought I should post this.

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

I want to highlight the second tab on page load and when a particular button is clicked, I want to highlight the first tab.

将第二个选项卡的类设置为活动标签窗格"无效.

Setting class as "Tab Pane Active" for the second tab doesn't work.

<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>

推荐答案

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

You have an active class on the 2nd tab pane, showing that initially, but not on the actual tab li. So you're seeing the second tabs content, but not a selected state on the tab. You need to change:

<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选择选项卡:

And to select tabs with 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()之内或使用的任何方式)，可以在页面加载时使用此选项，尽管最好是修复标记.您可以在事件监听器中为按钮使用它.

You can use this on page load if you like (within $(document).ready() or whatever you're using), though it's probably just best to fix the markup. You can use it within your event listener for your button.

请参见以下示例: http://www.bootply.com/kkmcecadLb

这篇关于data-toggle ="tab" ，在页面加载时激活第二个标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！