Javascript 添加方向控件（上一个/下一个）以在选项卡之间切换

我刚刚完成了为网站创建基本JavaScript选项卡功能的工作。现在我在尝试添加方向函数以在选项卡之间切换时遇到了一些问题。这是我到目前为止创造的。我不知道如何增加或减少索引，以便使用方向箭头切换选项卡和内容

$document.readyfunction{ $'.tabs列表li:第一个子项'.addClass'活动'， $”.tab内容。显示内容：第一个子项“.addClass”活动“； $'。选项卡列表li'。单击函数e{ 违约事件； 如果！$this.hasClass'active'{ var tabIndex=$this.index； var nthChild=tabIndex+1； //选择正确的元素 var$tabsList=$this.parent； var$tabContent=$tabsList.next'.tab content'； $tabsList.find'li.active'。删除类'active'； $this.addClass'active'； $tabContent.find'.show content'.removeClass'active'； $tabContent.find'.show内容：第n个child'+n个child+.addClass'active'； } } $'.prev'。单击，函数{}； $'next'。单击，函数{}； } .标签列表李{ 显示：内联块； } .tab内容。显示内容{ 显示：无 } .tab content.show-content.active{ 显示：块； } 表1 表2 表3 内容1 内容2 内容3 上 下一个

---

您可以使用jQuery和方法来完成。您只需要获取当前的.active选项卡并相应地更改它

以下是您需要的代码：

$('.prev').on('click', function() {
  var current = $('.tab-content .show-content.active');
  if (current.prev('.tab-content .show-content')[0]) {
    current.removeClass('active');
    current.prev('.tab-content .show-content').addClass('active');
  }
});

$('.next').on('click', function() {
  var current = $('.tab-content .show-content.active');
  if (current.next('.tab-content .show-content')[0]) {
    current.removeClass('active');
    current.next('.tab-content .show-content').addClass('active');
  }
});

演示：

还有一个演示片段：

$document.readyfunction{ $'.tabs列表li:第一个子项'.addClass'活动'， $”.tab内容。显示内容：第一个子项“.addClass”活动“； $'。选项卡列表li'。单击函数e{ 违约事件； 如果！$this.hasClass'active'{ var tabIndex=$this.index； var nthChild=tabIndex+1； //选择正确的元素 var$tabsList=$this.parent； var$tabContent=$tabsList.next'.tab content'； $tabsList.find'li.active'。删除类'active'； $this.addClass'active'； $tabContent.find'.show content'.removeClass'active'； $tabContent.find'.show内容：第n个child'+n个child+.addClass'active'； } } $'.prev'。单击，函数{ var current=$”.tab content.show content.active'； 如果当前.prev'.选项卡内容.显示内容'[0]{ current.removeClass'active'； 当前.prev'.tab内容.show内容'.addClass'active'； } }; $。下一步。单击，函数{ var current=$”.tab content.show content.active'； 如果当前。下一步。选项卡内容。显示内容“[0]{ current.removeClass'active'； 当前.next'.tab content.show content'.addClass'active'； } }; } .标签列表李{ 显示：内联块； 光标：指针； } .tab内容。显示内容{ 显示：无 } .tab content.show-content.active{ 显示：块； } .作为控制台行代码{ 显示：无； } .prev， .下一个{ 光标：指针； } 表1 表2 表3 内容1 内容2 内容3 上 下一个

---

谢谢你，我不知道这么简单。是否有一种方法可以使方向箭头部分循环。当我到达最后一个选项卡并单击“下一步”时，它不会返回到第一个选项卡。我没试过用这个http://stackoverflow.com/questions/15628500/how-do-i-loop-next@是的，我们只需要在if语句的else块中添加一个处理，您可以检查我的编辑。