Question

我有一个首页和一个产品页面。产品页面有onlicks：当我点击产品一，产品二等时，信息文本扩展。从首页我有产品页面的链接，我使用书签选项，所以滚动在产品页面的正确位置。

是否可以从首页单击特定产品，并在产品页面打开时展开特定产品信息？

Answer 1

如果这些是真正独立的页面，那么您无法通过点击事件执行此操作，因为页面A上的JS不会继续执行第B页。

但是，您可以将哈希锚名称添加到首页上的链接（products.html#prod1，products.html#prod2等），然后在产品页面上使用JS来确定选择哪个产品首页;这将为您提供足够的信息，以确定在加载产品页面时要展开的产品。

从基本的角度来说，你可以这样做：

if(window.location.hash) {
    var prod_sel = window.location.hash;
    expand_item(prod_sel);
}

function expand_item(product) {
    if(is_a_valid_product(product)) {
        //expand product here
    }
}

Answer 2

您可以使用css伪类:target。

因此，在您的首页上，您可以链接到您的产品页面：

<a href="/products#product-1">Product 1</a>

在您的产品页面上：

....
    <div class="product-wrapper" id="product-1">
        <h2>Some Title</h2>
        <img ... />
        <div class="content-wrapper">

        </div>
    </div>

    ... product 2
    ... product 3
....

在你的css中：

.content-wrapper {
    display: none;
}

.product-wrapper:target .content-wrapper {
    display: block;
}

您可以对此进行展开，以便只有目标（id匹配网址中哈希值的所有内容）才会应用特定规则。

它可能值得注意IE8，但在此之前不会支持。您可以同样采用基于javascript的方法来实现兼容性。

是否可以使用onclick等从其他页面扩展文本？

2 个答案: