在进度条上激活下一步

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>

Answer 2

blue 颜色表示.active 类，red 颜色是.step-done，green 颜色只是普通颜色，没有任何额外的类。

仅在li.active 类上添加点击事件，例如.nav-tabs li.active a。 $(this).parent() 表示当前父标记，即 li，因为事件处理程序发生在锚点 a 上，并使用 .next() 查找当前元素的下一个兄弟。更多详情请查看jQuery .next()

请检查以下代码 sn-p:

$(document).on('click', '.nav-tabs li.active a', function() {
    $(this).parent().removeClass("active");
    $(this).parent().addClass("step-done"); 
    $(this).parent().next().addClass('active');
});

.nav-tabs {
    list-style: none;
}

.nav-tabs li {
    display: inline-block;
    background: #5fba7d; // green color
    margin: 0 10px;
    padding: 10px;
    color: white;
}

.nav-tabs li a {
    cursor: pointer;
}

li.active {
    background: #0095ff; // blue color
}

li.step-done {
    background: #dc3d4c; // red color
}

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

Answer 3

在尝试了@Adeel 和@Matthias Schmidt 的所有建议后，我注意到我仍然遇到了同样的问题。该脚本没有添加class="active" 或class='active'，而是添加了class，但是当您更改为其他内容时，它添加了。所以我将active 类重新定义为mynewactive 并接受添加class="mynewactive"