當點擊下一個/上一個按鈕時選擇元素

Question

我試圖通過下一個/上一個按鈕而不是數字按鈕選擇選項卡元素，表示通過click轉到下一個選項卡。

默認按鈕小提琴：http://jsfiddle.net/LLdy3gd2/

HTML：默認數字按鈕

<p> 
<button class="select-tab" value="0">1</button> 
<button class="select-tab" value="1">2</button> 
<button class="select-tab" value="2">3</button> 
</p> 

JS：默認

$(document).ready(function() { 
$('#horizontalTab').responsiveTabs({ 
rotate: false, 
startCollapsed: 'accordion', 
collapsible: 'accordion', 
animation: 'slide', 
setHash: true, 
activate: function(e, tab) { 
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!'); 
    }, 

activateState: function(e, state) { 
//console.log(state); 
$('.info').html('Switched from <strong>' + state.oldState + '</strong> state to <strong>' + state.newState + '</strong> state!'); 
} 

}); 

$('#start-rotation').on('click', function() { 
$('#horizontalTab').responsiveTabs('active'); 
}); 

$('.select-tab').on('click', function() { 
$('#horizontalTab').responsiveTabs('activate', $(this).val()); 
}); 

}); 

我試過以下，但它不工作：

我的新按鈕：

HTML：而不是默認的按鈕

<div id="my-buttons"> 
<button class="select-tab">Next</button> 
<button class="select-tab">Previous</button> 
</div> 

我的JS：我已經添加了默認JS

$('#my-buttons').click(function() { 
    $(this).nextAll('.select-tab').toggle(); 
}); 

問題小提琴：http://jsfiddle.net/LLdy3gd2/2/

如何解決這一問題？
在此先感謝。

Answer 1

epoch's answer已到達那裏，但還有一點需要完成，因爲您還可以通過點擊選項卡來更改選項卡：我們需要跟蹤哪個選項卡實際打開，而不是哪個選項卡是最後一次點擊。

首先我添加了另一個類的按鈕：

<button class="select-tab next">Next</button> 

然後我添加一些代碼來跟蹤當前選項卡是：

var activetab = -1; 

$('#horizontalTab').on('tabs-activate', function(e, tab) { 
    activetab = tab.id; 
}); 

這偵聽tabs-activate事件記錄在here。它從-1開始，因此第一個標籤（索引0將在您立即點擊「下一個」時首先打開）。

然後，你需要修改的事件監聽了一下：

$('.select-tab').on('click', function() { 
    var newtab; 
    if ($(this).hasClass('next')) { 
     newtab = (++activetab > 3 ? 0 : activetab); 
    } else { 
     newtab = (--activetab < 0 -1 ? 2 : activetab); 
    } 
    $('#horizontalTab').responsiveTabs('activate', newtab); 
}); 

這就是現在被按下按鈕檢查。如果我們要去下一個標籤，我們增加計數器;如果沒有，我們會減少它。然後我們指示插件打開哪個標籤。

jsFiddle

Answer 2

基礎上， Next/ Previous狀態

只是遞增/遞減：

$('.select-tab').on('click', function() { 
    var size = $('#horizontalTab > ul > li').size(); 
    var nextPrevIndex = ($(this).text() === 'Next' ? ++i : --i) % size; 

    $('#horizontalTab').responsiveTabs('activate', nextPrevIndex); 
}); 

http://jsfiddle.net/LLdy3gd2/5/

編輯

updated支持選項卡的用戶seelction的點擊：

var i = 0; 

$('#start-rotation').on('click', function() { 
    $('#horizontalTab').responsiveTabs('active'); 
}); 

$('#horizontalTab').on('tabs-activate', function(e, tab) { 
    i = tab.id; 
}); 

$('.select-tab').on('click', function() { 
    var size = $('#horizontalTab > ul > li').size(); 
    var nextPrevIndex = ($(this).text() === 'Next' ? ++i : --i) % size; 

    if (nextPrevIndex < 0) nextPrevIndex = (size - 1); 
    if (nextPrevIndex > (size - 1)) nextPrevIndex = 0; 

    console.log(nextPrevIndex); 

    $('#horizontalTab').responsiveTabs('activate', nextPrevIndex); 
});