Question

如果点击下一个和上一个按钮，如何同时为列表li标签添加课程。

单击下一个并且上一个活动类应同时为li添加和删除。

任何人都可以解决这个问题。

提前致谢：）

＆＃13;

$(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;
  });
});

＆＃13;

.active {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 1

看看这个JsFiddle

您要做的是，您应该为相应的li添加相同的类名。在next()或previous()点击后，获取可见的div类，并使用它在list li上设置有效。

希望它有所帮助。

Answer 2

如果您现在按下下一个按钮，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;
    });

如果我的意思正确，它应该有用。

Answer 3

您可以尝试以下方法：

.next().addClass('your-class')和.prev().addClass('your-class')

希望它可以帮到你......

在prev和下一次点击上为<li>添加班级

3 个答案: