Javascript CSS使div在页面加载时处于活动状态

我有一个页面，呈现产品的变体（颜色选择）。我通过CSS隐藏了每个变体的所有可用性和定价（显示：无），直到单击变体图像。当页面加载时，如何使第一个变量处于活动状态？下面是处理选择的javascript和变体的CSS

对不起，如果这是一个新的问题，我觉得这是我错过的简单的东西

Javascript:

function selectThumb(el, productid) {
        $('.product-variant-line-thumb,.add-to-cart,.overview .prices,.overview .stock').removeClass('active');
        $('#addtocart_' + productid + '_EnteredQuantity').closest('.add-to-cart').addClass('active');
        $('.price-value-' + productid).closest('.prices').addClass('active');
        $('.price-value-' + productid).closest('.prices').next('.stock').addClass('active');
    };

$(document).ready(function(){
    $('.prices:first-child').addClass('active');
});

CSS:

HTML:

纸袋
$39.99            
供货情况：库存
$39.99            
供货情况：缺货
$39.99            
供货情况：库存

假设您正在将

设置为
显示：无您可以这样做：

Javascript:

function selectThumb(el, productid) {
        $('.product-variant-line-thumb,.add-to-cart,.overview .prices,.overview .stock').removeClass('active');
        $('#addtocart_' + productid + '_EnteredQuantity').closest('.add-to-cart').addClass('active');
        $('.price-value-' + productid).closest('.prices').addClass('active');
        $('.price-value-' + productid).closest('.prices').next('.stock').addClass('active');
    };

$(document).ready(function(){
    $('.prices:first-child').addClass('active');
});

CSS:

我的CSS就是这样设置的。我希望有一个CSS解决方案，以防客户关闭javascript，但这可能是最好的途径。谢谢纯CSS解决方案是只需手动将活动类添加到第一个div（如果您不动态生成这些div，这应该很好）。它们是从局部视图生成的。我想您可以做的另一件事是在CSS中使用
第一个子项
选择器。如果您总是希望第一个
.prices
div处于活动状态，只需在CSS中执行
.prices:first child{display:block；}
。
.prices.active {
    display:block;
}