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