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

Aariba 发表于 Dev

阿里巴

我正在尝试通过下一个/上一个按钮而不是数字按钮选择选项卡元素，这意味着要通过下一个选项卡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/

如何解决？
提前致谢。

寂寞的一天

epoch的答案已经到了，但是还有很多事情要做，因为您还可以通过单击选项卡来更改它们：我们需要跟踪哪个选项卡实际上是打开的，而不是最后一个单击的选项卡。

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

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

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

var activetab = -1;

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

这将侦听此处tabs-activate记录的事件。它始于第一个选项卡（如果立即单击“下一步”，索引将是第一个打开的选项卡）。-10

然后，您需要对事件侦听器进行一些修改：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。