javascript - 当 js 显示和隐藏效果到位时，让 div 显示不同的颜色

Question

我有一个自己创建的结账系统。结帐流程分为三个不同的部分。所有这些部分都在同一页中。部分是:

1. 运输信息
2. 账单信息
3. 订单确认

基本上，只要有人完成了他们选择的运输信息，就会继续查看账单信息，然后隐藏运输信息部分并显示账单信息部分。订单确认也一样。

无论显示什么部分，在页面顶部，我都有这个我们称之为部分标签:

<ul class="checkoutmenu">
    <div class="checkoutbutton" id="button1labl">1. Shipping Information</div>
    <div class="checkoutbutton" id="btnBillingInfolabl">2. Billing Information</div>
    <div class="checkoutbutton" id="button3labl">3. Order Confirmation</div>
</ul>

我想要发生的是，在客户所在的事件部分中，部分标签是不同的颜色。

因此，如果您在运输信息部分，该部分标签将采用不同的颜色。

我像这样显示和隐藏不同的部分:

$(".shippinginfocontainer").hide();
$('.paymentinfocontainer').show("slow");

我该怎么做？要查看我是如何拥有它的，我的网站是 buyfarbest.com。它在结帐页面中。

Answer 1

在您的 CSS 中，添加一个类，例如:

.active { /* CSS here to highlight */}

然后，在隐藏和显示时，将类添加和删除到相应的部分:

$('#button1labl').addClass('active');
$('#btnBillingInfolabl').removeClass('active');