javascript - CSS 使 div 在页面加载时处于事件状态

Question

我有一个呈现产品变体(颜色选择)的页面。在单击变体图像之前，我通过 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');
    };

CSS:

.product-details-page .product-variant-list, .product-details-page .overview .prices {display:none;}
.product-details-page .product-variant-list, .product-details-page .overview:nth-child(2) .active {display:inherit;}

HTML:

<div class="overview">
                        <div class="product-name">
                            <h1 itemprop="name">
                                Bag
                            </h1>
                        </div>


<div class="prices" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
        <div class="product-price">

            <span itemprop="price" class="price-value-1420">
$39.99            </span>
        </div>
            <meta itemprop="priceCurrency" content="USD">
</div>

    <div class="stock">
        <span class="label">Availability: </span><span class="value">In stock</span>
    </div>



<div class="prices" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
        <div class="product-price">

            <span itemprop="price" class="price-value-1421">
$39.99            </span>
        </div>
            <meta itemprop="priceCurrency" content="USD">
</div>

    <div class="stock">
        <span class="label">Availability: </span><span class="value">Out of stock</span>
    </div>

                                        <!--Back in stock subscription-->

<div class="prices" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
        <div class="product-price">

            <span itemprop="price" class="price-value-1532">
$39.99            </span>
        </div>
            <meta itemprop="priceCurrency" content="USD">
</div>

    <div class="stock">
        <span class="label">Availability: </span><span class="value">In stock</span>
    </div>

Answer 1

假设您将 .prices 设置为 display:none; 您可以这样做:

Javascript:

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

CSS:

.prices.active {
    display:block;
}