Добавить класс для <LI> на предыдущий и следующий клик

Question

Как добавить класс для тега li списка одновременно при нажатии на кнопку "Далее" и "Предыдущая".

по щелчку вперед и назад активный класс должен одновременно добавлять и удалять для li.

Кто-нибудь может решить эту проблему.

Заранее спасибо:)

$(document).ready(function() {
  $(".divs div").each(function(e) {
    if (e != 0)
      $(this).hide();

  });

  $("#next").click(function() {
    $(".list li").addClass("active");
    if ($(".divs div:visible").next().length != 0)
      $(".divs div:visible").next().show().prev().hide();
    else {
      $(".divs div:visible").hide();
      $(".divs div:first").show();
    }
    return false;
  });

  $("#prev").click(function() {

    if ($(".divs div:visible").prev().length != 0)
      $(".divs div:visible").prev().show().next().hide();
    else {
      $(".divs div:visible").hide();
      $(".divs div:last").show();
    }
    return false;
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
  <div class="cls1">1</div>
  <div class="cls2">2</div>
  <div class="cls3">3</div>
  <div class="cls4">4</div>
  <div class="cls5">5</div>
  <div class="cls6">6</div>
  <div class="cls7">7</div>
</div>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<a id="next">next</a>
<a id="prev">prev</a>

Answer 1

Посмотрите на это JsFiddle

То, что вы должны сделать, это, вы должны добавить те же имена классов для соответствующих li, На next() или же previous() щелкните, получите класс видимого элемента div и используйте его, чтобы активировать list li,

Надеюсь, поможет.

Answer 2

Вы можете попробовать следующими способами:

.next().addClass('your-class') а также .prev().addClass('your-class')

Надеюсь, это поможет вам....

Answer 3

active класс будет применяться к <li> теги, если вы нажмете следующую кнопку сейчас. И если вы хотите, чтобы perv Кнопка сделать то же самое должна изменить ваш код на это:

$("#prev").click(function(){
   $(".list li").addClass("active");
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });

Если я правильно понял, это должно сработать.