如何在按下按鈕時更改Twitter Bootstrap選項卡？

我需要在按下按鈕時更改選項卡，並且選項卡應該由id標識。下面的代碼不爲我工作 - 只是重新加載頁面：如何在按下按鈕時更改Twitter Bootstrap選項卡？

<div class="form-actions"> 
    <button class="btn btn-primary" id="btn-next">Next</button> 
    <button type="reset" class="btn">Clear</button> 
</div> 
... 
<div class="tab-pane active" id="2"> 
... 

$("#btn-next").click(function(event) { 
    $('#2').tab('show'); 
});

來源

2012-02-12 LA_

您可以使用這樣的事情：

function nextTab(elem) { 
    $(elem + ' li.active') 
    .next() 
    .find('a[data-toggle="tab"]') 
    .click(); 
} 
function prevTab(elem) { 
    $(elem + ' li.active') 
    .prev() 
    .find('a[data-toggle="tab"]') 
    .click(); 
}

，並使用nextTab('#tab');或prevTab('#tab');

活生生的例子繼續操作：http://jsbin.com/atinel/9/edit#javascript,html

來源

2012-02-12 21:41:34 balexandre

奇怪的，但它不工作在我的情況下（我使用'＃2''而不是''＃tab''）。現場示例中只有一次（如果我第二次按Next，jsbin顯示代碼）。我使用最新版本的FF。 – 2012-02-13 20:35:41

不要將數字作爲身份證號碼...始終以字母開頭！ – balexandre 2012-02-13 20:38:33

@balexandre jsbin確實有LA_所描述的錯誤，但在我的代碼中工作正常。謝謝 – arbme 2012-02-14 06:01:32

怎麼樣使用data-toggle="tab"在<a>標記？就像：

<a href="#2" class="btn btn-primary" id="btn-next" data-toggle="tab">Next</a>

來源

2012-02-13 13:55:17

是的，它顯示下一個選項卡，但不完全正確 - 顯示下一個選項卡的內容，但第一個選項卡仍按選定的高亮顯示。 – 2012-02-13 19:53:28

我試圖在說TAB 2的內容面板內的href鏈接打開TAB 1內容面板，完美的工作..但活動標籤狀態不會改變。我正在使用適當的href #id和數據切換=「選項卡」甚至嘗試添加class = active到href，沒有去..任何想法？ – 422 2012-07-12 16:26:13

如何在按下按鈕時更改Twitter Bootstrap選項卡？

回答

相關問題