javascript - 添加方向控件(上一个/下一个)以在选项卡之间切换

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>

<小时/>

编辑:

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

以下是您的代码:

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