javascript - 在进度条上激活下一步

Question

这是我的进度条的 ul 列表

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a aria-controls="select-room"><span class="mg-bs-tab-num">1</span><span class="mg-bs-bar"></span>Select Room</a>
    </li>
    <li role="presentation" class="">
        <a aria-controls="personal-info"><span class="mg-bs-tab-num">2</span><span class="mg-bs-bar"></span>Personal Info</a>
    </li>
    <li role="presentation">
        <a aria-controls="payment"><span class="mg-bs-tab-num">3</span><span class="mg-bs-bar"></span>Payment</a>
    </li>
    <li role="presentation">
        <a aria-controls="thank-you"><span class="mg-bs-tab-num">4</span>Thank You</a>
    </li>
</ul>

当有人通过单击链接选择房间时，我们从第一个 li 中删除类 active 并将其放在第二个上，同时添加类 在第一个 li 上完成 step-done，下面的 jQuery 应该实现这一点。但是，当我通过 inspect 元素查看代码时，我发现它添加了 class 而不是 class="active"。当我改为添加 step-done 时，它起作用了。可以改变什么来使它成功？

$(".nav-tabs li").removeClass("active");
$(".nav-tabs li").first().addClass("step-done"); 
$(".nav-tabs li").first().next().addClass('active'); 

Answer 1

这是我对此的看法，希望它能满足您的需求。它从该类的第一个元素中删除 active 类，将其与 step-done 类交换，然后将 active 类添加到下一步 - 它应该适用于所有四个步骤。

$('#advance').click(function(){
  var active = $(".nav-tabs .active:first");
  active.removeClass("active");
  active.addClass("step-done");
  active.next("li").addClass("active");
});

.active{
  background:yellow;
}
.step-done{
  background:lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a aria-controls="select-room"><span class="mg-bs-tab-num">1</span><span class="mg-bs-bar"></span>Select Room</a>
    </li>
    <li role="presentation" class="">
        <a aria-controls="personal-info"><span class="mg-bs-tab-num">2</span><span class="mg-bs-bar"></span>Personal Info</a>
    </li>
    <li role="presentation">
        <a aria-controls="payment"><span class="mg-bs-tab-num">3</span><span class="mg-bs-bar"></span>Payment</a>
    </li>
    <li role="presentation">
        <a aria-controls="thank-you"><span class="mg-bs-tab-num">4</span>Thank You</a>
    </li>
</ul>
<button id="advance">Advance Step</button>