单击时按下一个/上一个按钮选择元素

I'm trying to select tab elements by next/previous buttons instead of number buttons, means go to next tab by click.

我正在尝试通过下一个/上一个按钮而不是数字按钮选择标签元素,意味着通过单击转到下一个标签。

Default Buttons Fiddle: http://jsfiddle.net/LLdy3gd2/

默认按钮小提琴:http://jsfiddle.net/LLdy3gd2/

HTML: Default Number Buttons

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

$(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());
});

});

I've tried the following, but it doesn't work:

我尝试了以下,但它不起作用:

My New Buttons:

我的新按钮:

HTML: Instead of default buttons

HTML:而不是默认按钮

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

My JS: I have added with Default JS

我的JS:我添加了Default JS

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

Problem Fiddle: http://jsfiddle.net/LLdy3gd2/2/

问题小提琴:http://jsfiddle.net/LLdy3gd2/2/

How fix this?
Thanks in advance.

如何修复这个?提前致谢。

2 个解决方案

#1

epoch's answer is getting there, but there's a little more that needs to be done, because you can also change tabs by clicking on them: we need to keep track of which tab is actually open, not which tab was the last clicked.

epoch的答案即将到来,但还有一些需要做的事情,因为您还可以通过点击它们来更改标签:我们需要跟踪哪个标签实际打开,而不是最后点击的标签。

First I've added another class to your button:

首先,我在您的按钮中添加了另一个类:

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

Then I've added some code to track which the current tab is:

然后我添加了一些代码来跟踪当前标签的位置:

var activetab = -1;

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

This listens for the tabs-activate event documented here. It starts at -1 so the first tab (index 0 will be the first to open if you click "next" immediately).

这会侦听此处记录的tabs-activate事件。它从-1开始,所以第一个选项卡(索引0将是第一个打开,如果你立即点击“下一步”)。

Then you need to modify the event listener a bit:

然后你需要稍微修改一下事件监听器:

$('.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);
});

This now checks which button was pressed. If we're going to the next tab, we increment the counter; if not, we decrement it. Then we instruct the plugin which tab to open.

现在检查按下了哪个按钮。如果我们要进入下一个标签,我们会增加计数器;如果没有,我们减少它。然后我们指示插件打开哪个选项卡。

jsFiddle

#2

Just increment/decrement based on the Next/Previous state:

只需根据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/

EDIT

updated to support clicking of user seelction of tabs:

更新以支持单击选项卡的用户选择:

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);
});

#1