当点击下一个按钮同时激活下一个li

Question

<ul class="steps">
<li class="ms-hover active">1<li>
<li class="ms-hover">2<li>
<li class="ms-hover">3<li>
<li class="ms-hover">4<li>
<ul>

<a href="javascript:;" class="btn btn-default button-next">Next</a>
<a href="javascript:;" class="btn btn-default button-prev">Back</a>

如何激活下一个李？？

$(".button-next").click(function(){
    var $next;
    var $selected = $(".steps");
    $next = $selected.next('li');

    $next = $selected.next('li');
    $selected.removeClass("active");
    $next.addClass('active');
    $(".button-prev").show();
});

以上编码不活跃下一个李... 请帮帮我

Answer 1

使用.find() / .children()代替.next()将<li>与active类定位。

然后使用.next()在兄弟之后立即定位

//Target active li  
$next = $selected.find('li.active');    
$next.removeClass("active");

//target next sibling of active
$next.next('li').addClass('active');

Answer 2

您应该使用<li>和<ul>关闭</li>和</ul>。

在原始代码中，$selected = $(".steps");会选择<ul>，而$selected.next('li')会找到下一个<li> 兄弟，在这种情况下，的没有

$(".button-next").click(function(){
    var $next;
    var $selected = $(".steps");
    $next = $selected.next('li');

    $next = $selected.next('li');
    $selected.removeClass("active");
    $next.addClass('active');
    $(".button-prev").show();
});

您可以将$(".steps");替换为$(".active");，以选择<li>与班级active。然后使用<li>找到下一个$next = $selected.next('li');，例如以下代码：

$(".button-next").click(function(){
    var $next;
    var $selected = $(".active");
    $next = $selected.next('li');
    $selected.removeClass("active");
    $next.addClass('active');
    $(".button-prev").show();
});

如果上一个<li>有课程active，并且您点击了下一个按钮，则会删除所有active课程，并且不再有下一个<li>，所以我制作了以下版本来克服这个问题：

$(".button-next").click(function() {
  // find the index of active li
  var index = $('.active').index('.ms-hover')
  var $li = $('.ms-hover')
  // remove all active class
  $li.removeClass('active')
  // find the next li and add active class
  $li.eq( (index+1) % $li.length ).addClass('active')
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="steps">
  <li class="ms-hover active">1
  </li>
  <li class="ms-hover">2
  </li>
  <li class="ms-hover">3
  </li>
  <li class="ms-hover">4
  </li>
</ul>

<a href="javascript:;" class="btn btn-default button-next">Next</a>
<a href="javascript:;" class="btn btn-default button-prev">Back</a>

Answer 3

试试这段代码它会帮助你

$(".button-next").click(function(){
var $next;
// this line will find li with class active
var $selected = $("#steps").find("li.active");
//This line will select next li item 
$next = $selected.next('li');

$selected.removeClass("active");
// and class will be added to next element
$next.addClass('active');
$(".button-prev").show();

}）;