如何使用 jQuery 选项卡“Easy Tabs”实现“下一步”按钮答案

【问题标题】：How to implement a "next" button using jQuery tabs "Easy Tabs"如何使用 jQuery 选项卡“Easy Tabs”实现“下一步”按钮
【发布时间】：2012-09-24 14:46:09
【问题描述】：

此插件在文档中具有下一个和上一个按钮，但没有提及实现它们的方法...http://os.alfajango.com/easytabs/#previous-and-next-buttons

任何人都可以向我发送正确的方向吗？

【问题讨论】：

标签： jquery jquery-ui button tabs next

【解决方案1】：

驱动下一个和上一个按钮的代码，就在标签面板的下方：

$('.next-tab, .prev-tab').click(function() {
  var i = parseInt($(this).attr('rel'));
  var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
  $tabContainer.easytabs('select', tabSelector);
  return false;
});

请务必记下对功能至关重要的按钮元素的类和 rel

【讨论】：

【解决方案2】：

我喜欢user1026361 的回答。但是显示的站点上的默认实现还有一点不足之处。例如，我只想在选项卡的任一侧使用一对前一个和下一个符号，而不是每个选项卡内容中的单个集合。这是我想出的：

JS： （请注意，prev 和 next 函数可能可以合并为一个函数。它们几乎相同：D）

$( document ).ready(function() {
  $("#tab-full-container").easytabs({
    animate: true,
    animationSpeed: 1000,
    defaultTab: "span#tab-1",
    panelActiveClass: "active-content-div",
    tabActiveClass: "selected-tab",
    tabs: ".tab-wrap > div.etabs > span",
    updateHash: false,
    cycle: 5000
  });

  var $tabs = $('.tab');
  var $tabContainer = $('.etab');

  $('.prev-tab').click( function() {
    var currTab, i;
    currTab = $('a.selected-tab').attr('href');
    var i = ( parseInt(currTab.match(/\d+/)) - 2 );
    $tabs.children('a:eq(' + i + ')').click();
  });

  $('.next-tab').click( function() {
    var currTab, i;
    currTab = $('a.selected-tab').attr('href');
    var i = ( parseInt(currTab.match(/\d+/)) );
    $tabs.children('a:eq(' + i + ')').click();
  });

});

HTML：

<div id="tab-full-container" class='tab-container'>
  <div class="tab-wrap">
    <span class="prev-tab ctl">«</span>
    <div class='etabs'>
      <span class='tab' id="tab-1"><a href="#tabs1">&nbsp;</a></span>
      <span class='tab'><a href="#tabs2">&nbsp;</a></span>
      <span class='tab'><a href="#tabs3">&nbsp;</a></span>
      <span class='tab'><a href="#tabs4">&nbsp;</a></span>
      <span class='tab'><a href="#tabs5">&nbsp;</a></span>
      <span class='tab'><a href="#tabs6">&nbsp;</a></span>
      <span class='tab'><a href="#tabs7">&nbsp;</a></span>
      <span class='tab'><a href="#tabs8">&nbsp;</a></span>
    </div>
    <span class="next-tab ctl">»</span>
  </div>
  <div class='panel-container'>

    <div id="tabs1">
    </div>
    <div id="tabs2">
    </div>
    <div id="tabs3">
    </div>

    ...ETC.

  </div>
</div>

如果你愿意，我也可以发布 CSS。

【讨论】：