按键显示jQuery显示下一个上一个项目

Question

我有清单项目：

<ul>
  <li class="slides">
    <p>content</p>
  </li>
  <li class="slides">
    <p>content</p>
  </li>

.. etc

</ul>

和jQuery：

$(document.documentElement).keyup(function (e) {

  if (e.keyCode == 39)
  {
  }

  if (e.keyCode == 37)
  {
  }

});

当点击键盘'右'并按键盘'左'显示上一项时，如何显示下一项？

Answer 1

HTML

<ul>
  <li class="active slides">
    <p>content</p>
  </li>
  <li class="slides">
    <p>content</p>
  </li>

.. etc

</ul>

的jQuery

$(document.documentElement).keyup(function (e) {
  var $activeslide = $('.slides.active'), $targetslide;

  if (e.keyCode == 39)
  {
    if ($activeslide.next('.slides').length) {
      $targetslide = $activeslide.next('.slides');
    } else {
      $targetslide = $('.slides:first');
    }
  }

  if (e.keyCode == 37)
  {
    if ($activeslide.prev('.slides').length) {
      $targetslide = $activeslide.prev('.slides');
    } else {
      $targetslide = $('.slides:last');
    }
  }

  $targetslide.addClass('active');
  $activeslide.removeClass('active');

});

CSS

.slides {
  display: none;
}

.slides.active {
  display: block;
}

根据您的意愿动画。