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

Question

我刚刚完成了为网站创建基本的 JavaScript 选项卡功能。现在我在尝试添加方向函数以在选项卡之间切换时遇到了一些问题。这是我到目前为止创建的。我不会就如何增加或减少 index 以使用方向箭头切换选项卡和内容提出诉讼

$(document).ready(function() {
  $('.tabs-list li:first-child').addClass('active'),
    $('.tab-content .show-content:first-child').addClass('active');

  $('.tabs-list li').click(function(e) {
    event.preventDefault();
    if (!$(this).hasClass('active')) {
      var tabIndex = $(this).index();
      var nthChild = tabIndex + 1;

      // select the right elements
      var $tabsList = $(this).parent();
      var $tabContent = $tabsList.next('.tab-content');

      $tabsList.find('li.active').removeClass('active');
      $(this).addClass('active');
      $tabContent.find('.show-content').removeClass('active');
      $tabContent.find('.show-content:nth-child(' + nthChild + ')').addClass('active');
    }
  })

  $('.prev').on('click', function() {});

  $('next').on('click', function() {});
})

.tabs-list li {
  display: inline-block;
}

.tab-content .show-content {
  display: none
}

.tab-content .show-content.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <ul class="tabs-list">
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>

  <div class="tab-content">
    <div class="show-content">
      Content 1
    </div>

    <div class="show-content">
      Content 2
    </div>

    <di>
      Content 3
    </di>

  </div>

</div>

<ul>
  <li class="prev">Prev</li>
  <li class="next">Next</li>
</ul>

Answer 1

您可以使用 jQuery .prev() 和 .next() 方法来实现。您只需要获取当前的.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');
  }
});

演示：

This is a working Fiddle 和一个有效的 Demo sn-p：

$(document).ready(function() {
  $('.tabs-list li:first-child').addClass('active'),
    $('.tab-content .show-content:first-child').addClass('active');

  $('.tabs-list li').click(function(e) {
    event.preventDefault();
    if (!$(this).hasClass('active')) {
      var tabIndex = $(this).index();
      var nthChild = tabIndex + 1;

      // select the right elements
      var $tabsList = $(this).parent();
      var $tabContent = $tabsList.next('.tab-content');

      $tabsList.find('li.active').removeClass('active');
      $(this).addClass('active');
      $tabContent.find('.show-content').removeClass('active');
      $tabContent.find('.show-content:nth-child(' + nthChild + ')').addClass('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');
    }
  });
})

.tabs-list li {
  display: inline-block;
  cursor: pointer;
}

.tab-content .show-content {
  display: none
}

.tab-content .show-content.active {
  display: block;
}

.as-console-row-code {
  display: none;
}

.prev,
.next {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <ul class="tabs-list">
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>

  <div class="tab-content">
    <div class="show-content">
      Content 1
    </div>

    <div class="show-content">
      Content 2
    </div>

    <div class="show-content">
      Content 3
    </div>

  </div>

</div>

<ul>
  <li class="prev">Prev</li>
  <li class="next">Next</li>
</ul>

---

编辑：

要使其以循环方式循环并且不会在第一个或最后一个元素中停止，我们应该在if 语句的else 块中实现它，这样它就不会停止。

以下是您的代码：

$('.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');
  } else {
    current.removeClass('active');
    $(".tab-content .show-content:last").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');
  } else {
    current.removeClass('active');
    $(".tab-content .show-content:first").addClass('active');
  }
});

考虑到这些变化，这是an updated Fiddle。