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;
}

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

1 个答案: