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

根据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

epoch's answer即将到来，但还有一些需要完成的工作，因为您还可以通过点击来更改标签：我们需要跟踪哪个标签实际打开，而不是哪个标签是最后一次点击。

首先我在你的按钮上添加了另一个类：

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

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

var activetab = -1;

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

这会收听记录here的tabs-activate事件。它从-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

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

2 个答案: