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

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以及一个有效的演示片段：

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

修改

为了使它以循环方式循环并且不在第一个或最后一个元素中停止，我们应该在else语句的if块中实现它，因此它不会停止

以下是您的代码：

$('.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考虑​​到这些变化。