jQuery 通过链接快速选择产品

Question

这很难解释，但我会尽力而为。

我有一个包含 3 个 div 的页面，每个 div 包含每个产品的信息和一个订购按钮。访问者可以点击产品图片，它基本上会隐藏所有的 div，然后显示与他们点击的图片相关的一个。

我有一个侧边栏，它在站点的所有页面上全局运行，其中包含指向每个产品的“快速链接”。我想知道是否有一种方法可以将这些链接到产品页面，以便人们可以从网站的任何页面单击它们，它将打开产品页面，其中他们单击的产品已经被选中并可见。

我认为可以通过使用产品页面链接末尾的#product1、#product2 等来完成，但我不太确定如何实现。有人有什么想法吗？

PS：在产品页面上，仅通过检测产品图像上的点击然后隐藏和显示单个 DIV（而不是通过使用 # 链接锚）来选择产品。

Answer 1

你想使用锚点。

因此，您在 DIV 中命名了一个锚点。

<div id="product1">
<a name="product1">
</div>

然后你用'#'链接到你描述的那个。如果您从另一个页面链接，请使用完整路径，如果您从同一页面链接，请使用 #product1。

<a href="/path/to/page/#product1">

现在您发现的棘手之处在于 jQuery 意识到您在页面加载时请求了一个锚点。这段代码确实依赖于像上面这样的结构，其中 div 的 id 与锚点同名。这里有一小段示例代码来调用 div 上的 show() 方法，该方法与传递到 URI 中的锚点名称相同。

$(document).ready(function() {
    var uri = document.location.toString();
    if (uri.match("#")) {
        anchor = uri.split("#")[1];
        $('#' + anchor).show();
    }
});