Javascript jQuery：根据URL以最佳方式添加类

我有一个进度表的HTML：

<div class="col-md-3" style="margin-left: -20px;">
    <div class="progress-pos active" id="progess-1">
    <div class="progress-pos-inner">
        Login
    </div>
    </div>
</div>
    <div class="col-md-3 progress-pos-container">
    <div class="progress-pos" id="progess-2">
    <div class="progress-pos-inner">
        Scan Items
    </div>
    </div>
</div>
    <div class="col-md-3 progress-pos-container">
    <div class="progress-pos" id="progess-3">
    <div class="progress-pos-inner">
        Confirm Address
    </div>
    </div>
</div>
    <div class="col-md-3 progress-pos-container">
    <div class="progress-pos" id="progess-4">
    <div class="progress-pos-inner">
        Finished
    </div>
    </div>
</div>   

我知道这不是完成这项工作的最佳方式（即使代码确实有效），因为我必须反复重复同样的事情。我试过

prev（）

，但似乎不起作用

最好的办法是什么

编辑：为了清楚起见，除了具有

活动

类的元素之外，并非所有元素都应被赋予

活动

类，仅是先前的元素

编辑2:

当前活动：

用户位于页面

？route=account/login&SSL

，

#progress-1

被赋予

.active

类

用户成功前进到

？路径=结帐/购物车
，并且
#progress-1
被赋予
.inactive
类，而
#progress-2
为
.active

用户成功进入
？route=checkout/checkout
，而
#progress-1
和
#progress-2
被赋予
.inactive
类，而
#progress-3
为
.active
类，依此类推

$( document ).ready(function() {

    // Re-set all on entry
    $("#progess-1, #progess-2, #progess-3, #progress-4").removeClass("inactive active");

    // Then check for the correct one to make active
    if(location.search == "?route=account/login&SSL")
        $("#progess-1").addClass("active");
    else if(location.search == "?route=checkout/cart")
    {
        $("#progess-2").addClass("active");
        $("#progess-1").addClass("inactive");
    }
    else if(location.search == "?route=checkout/checkout")
    {
        $("#progess-3").addClass("active");
        $("#progess-1,#progess-2").addClass("inactive");
    }
    else if(location.search == "?route=checkout/success")
    {
        $("#progess-4").addClass("active");
        $("#progess-1,#progess-2,#progess-3").addClass("inactive");
    }
});

这也可以通过将if语句替换为switch来实现
 我认为，您可以执行类似的操作：$（'.alllinks'）.addClass（'inactive'）$（'..+location.search）.addClass（'active'）。让我知道它是否成功sense@Vnuuk谢谢你的帮助，但这对我来说没有多大意义，因为我仍然是js的noob.：）让我解释一下#1.您需要修改HTML和#progess-N ID，将您可能有的内容放入URL中。是清楚的吗？mplungjan，我不确定我是否明白你的意思..我会阻止HTML的更改，这似乎很简单谢谢你的回答，但是我相信这不会产生预期的影响-只有活动元素之前的元素应该是非活动的，而不是之后的元素，由于用户尚未完成该部分。在您的解决方案中，您说它按照您的预期工作，您在每个语句中手动将以前的设置为非活动。抱歉，写得太快了。已编辑。@harley_woop，我将快速编辑解决方案以满足您的要求needs@harley_woop进程中的每个步骤现在都将处于活动状态。如果您正在执行步骤2，则步骤1和2将突出显示，而步骤3和4将保持不活动状态。
$( document ).ready(function() {

    // Re-set all on entry
    $("#progess-1, #progess-2, #progess-3, #progress-4").removeClass("inactive active");

    // Then check for the correct one to make active
    if(location.search == "?route=account/login&SSL")
        $("#progess-1").addClass("active");
    else if(location.search == "?route=checkout/cart")
    {
        $("#progess-2").addClass("active");
        $("#progess-1").addClass("inactive");
    }
    else if(location.search == "?route=checkout/checkout")
    {
        $("#progess-3").addClass("active");
        $("#progess-1,#progess-2").addClass("inactive");
    }
    else if(location.search == "?route=checkout/success")
    {
        $("#progess-4").addClass("active");
        $("#progess-1,#progess-2,#progess-3").addClass("inactive");
    }
});