单击时 Select 元素由 next/previous 按钮

Question

我正在尝试通过 next/previous 按钮而不是数字按钮来 select 选项卡元素，这意味着通过 click 转到下一个选项卡。

默认按钮 Fiddle: 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();
});

问题Fiddle:http://jsfiddle.net/LLdy3gd2/2/

如何解决这个问题？
提前致谢。

Answer 1

只是 increment/decrement 基于 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 支持点击用户选择的选项卡：

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

Answer 2

即将实现，但还需要做更多的事情，因为您还可以通过单击来更改选项卡：我们需要跟踪实际打开的是哪个选项卡，而不是哪个选项卡标签是最后一次点击。

首先，我向您的按钮添加了另一个 class：

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

然后我添加了一些代码来跟踪当前选项卡是：

var activetab = -1;

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

这会侦听记录在 here 中的 tabs-activate 事件。它从 -1 开始，因此第一个选项卡（如果您立即单击 "next"，索引 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

单击时 Select 元素由 next/previous 按钮

Select element by next/previous button when click

html

javascript

jquery

click

onclick