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>

当某人通过单击链接选择房间时，我们会从第一个active中删除类li并放在第二个上，而在第一个{上添加类step-done {1}}，下面的jQuery应该可以实现这一点。但是，当我通过inspect元素查看代码时，我发现它已经添加了li而不是class。当我改为添加class="active"时，它可以工作。要成功完成哪些更改？

step-done

Answer 1

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

仅在li.active类（例如.nav-tabs li.active a）上添加点击事件。 $(this).parent()表示当前的父标记是li，因为事件处理程序发生在锚点a上，并使用.next()查找当前元素的下一个同级。有关更多详细信息，请检查jQuery .next()

请检查以下代码段：

$(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 2

这是我的看法，我希望它能满足您的要求。它将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 3

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

在进度条上激活下一步

3 个答案: