Javascript 单击时按“下一步/上一步”按钮选择图元

我试图通过下一个/上一个按钮而不是数字按钮来选择选项卡元素，这意味着通过

单击
转到下一个选项卡

默认按钮小提琴：

HTML：默认数字按钮

问题小提琴：

如何解决这个问题

提前感谢。
只需根据
下一个
/
上一个
状态增加/减少：

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

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


编辑

要支持单击用户查看选项卡的选项，请执行以下操作：

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

var i=0；
$（“#开始旋转”）。在（'click'，函数（）{
$（“#水平选项卡”）。响应选项卡（“活动”）；
});
$（“#水平选项卡”）。在（'tabs-activate'，函数（e，选项卡）{
i=选项卡id；
});
$（'.select tab'）。在（'click'，函数（）{
变量大小=$（'#horizontalTab>ul>li'）。大小（）；
var nextPrevIndex=（$（this）.text（）=='Next'？+i:--i）%size；
如果（nextPrevIndex<0）nextPrevIndex=（大小-1）；
如果（nextPrevIndex>（大小-1））nextPrevIndex=0；
console.log（nextPrevIndex）；
$（“#水平选项卡”）。响应选项卡（“激活”，下一步预览索引）；
});
即将实现，但还有一点需要做，因为您也可以通过单击选项卡来更改选项卡：我们需要跟踪哪个选项卡实际打开，而不是最后单击的选项卡

首先，我在按钮中添加了另一个类：

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

这将侦听
选项卡是否激活
记录的事件。它从
-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);
});

$（'select tab'）。在（'click'，函数（）{
var newtab；
if（$（this）.hasClass（'next'））{
newtab=（++activetab>3？0:activetab）；
}否则{
newtab=（-activetab<0-1？2:activetab）；
}
$（“#水平选项卡”）。响应选项卡（“激活”，新选项卡）；
});

现在检查按下了哪个按钮。如果我们要进入下一个选项卡，我们增加计数器；如果不是，我们就减少它。然后我们指示插件打开哪个选项卡


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

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

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

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

var activetab = -1;

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

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