如何創建「下一步」按鈕，切換使用Java腳本和Twitter的引導

標籤我有以下代碼：http://jsfiddle.net/h6rQ2/2/如何創建「下一步」按鈕，切換使用Java腳本和Twitter的引導

我使用HTML創建一個基本形式。這個表單有兩個部分 - 每個部分都包含在一個選項卡中（使用Twitter Bootstrap創建的選項卡）。

如何創建從第一個標籤頁切換到第二個標籤頁的「下一個」按鈕？當我嘗試這樣做時，它只會提交表單。 Twitter Bootstrap是否已經提供了一項功能，可讓您通過外部按鈕切換標籤頁？如果是這樣，你如何使用它？

2012-08-09 goelv

你嘗試過什麼聯繫？ [This]（http://twitter.github.com/bootstrap/javascript.html#tabs）向您展示瞭如何使用JS選擇特定的選項卡。現在你只需要弄清楚如何獲得當前元素的下一個兄弟。 – sachleen 2012-08-09 06:54:21

我創建了一個調用以下函數的按鈕：$（function next（）{$（'#tab_bar a：last'）.tab（'show'）;}）。我遇到兩個問題：（1）當我第一次加載頁面時，第二個標籤頁已經激活，而我希望第一個標籤頁處於活動狀態（2）當我按下按鈕時，它會在切換到第二個標籤頁之前提交表單。我是新來的，所以我確定我忽略了一些重要的東西 – goelv 2012-08-09 06:58:44

我有一種感覺，使用Twitter Bootstrap提供的功能可以用來完成我所需要的功能。但我不確定如何正確使用它們 – goelv 2012-08-09 07:00:34

鑑於這些按鈕：

<div class="btn-group"> 
    <button class="btn" id="prevtab" type="button">Prev</button> 
    <button class="btn" id="nexttab" type="button">Next</button> 
</div>

你會需要這個JS：

var $tabs = $('.tabbable li'); 

$('#prevtab').on('click', function() { 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show'); 
}); 

$('#nexttab').on('click', function() { 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show'); 
});

Working demo (jsfiddle)

來源

2012-08-09 10:06:42 Sherbrow

是否有某種方式我應該添加JavaScript？我將你的javascript代碼複製粘貼到一個單獨的文件中，並在我的html頭部調用該文件。它仍然沒有工作，而我正處於我的繩索末端。 – goelv 2012-08-09 22:09:59

好吧，經過一些廣泛的測試後，我很確定我沒有正確加載你的javascript。這是我目前的做法：將代碼簡單地複製粘貼到文件「custom.js」中。難道我做錯了什麼？ – goelv 2012-08-09 22:25:05

@goelv您需要*等待dom準備好這樣做。該演示正在工作，因爲jsfiddle默認是這樣做的。檢查[這個文檔]（http://api.jquery.com/jQuery/#jQuery3），並將我的代碼放在一個函數中，只有在dom準備好後纔會調用它。 – Sherbrow 2012-08-09 22:39:46

爲了使循環（最後一個標籤頁轉到第一，標籤進入到最後），這是我的代碼：

function previousVin(){ 
    var previousElement = $('#myTab li').filter('.active').prev('li').find('a[data-toggle="tab"]'); 
    if(previousElement.html()===undefined){ 
     $('#myTab a:last').tab('show'); 
    }else{ 
     previousElement.tab('show'); 
    } 
} 
function nextVin(){ 
    var nextElement = $('#myTab li').filter('.active').next('li').find('a[data-toggle="tab"]'); 
    if(nextElement.html()===undefined){ 
     $('#myTab a:first').tab('show'); 
    }else{ 
     nextElement.tab('show'); 
    } 
}

來源

2014-01-21 11:16:49 hugsbrugs

-1

對於引導3

$('a[data-toggle^="tab"]').click(function(){ 
    var data = $(this).attr("href"); 
    $('a[data-toggle^="tab"]').parent("li").removeClass("active"); 
    $('li a[href^="'+data+'"]').parent("li").addClass("active"); 
    $('.tab-pane').removeClass("active"); 
    $(data).addClass("active"); 
})

您可以添加這樣的任何地方

<a href="#tabname2" data-toggle="tab">Next</a> 
<a href="#tabname1" data-toggle="tab">Previous</a>

來源

2014-06-03 15:03:44

如何創建「下一步」按鈕，切換使用Java腳本和Twitter的引導

回答

相關問題