Question

我正在尝试创建一个并排比较两个产品的页面。到目前为止，我为每个产品都有一个单页面。在该单帖页面上是一组链接，允许用户选择不同的产品来与之进行比较。

在比较页面上，我能够弄清楚如何切换从原始帖子中提取信息的第一个div，但是如何切换第二个div呢？

以下是我在单帖页面上的代码（我使用Jquery show/hide in another page作为参考）：

<ul class="linkList">
    <li><a href="product-comparison/#product1">Product 1</a></li>
    <li><a href="product-comparison/#product2">Product 2</a></li>
</ul>

以下是我在比较页面上的代码：

<ul class="linkList">
    <li><a href="#product1" class="panlink">Product 1</a></li>
    <li><a href="#product2" class="panlink">Product 2</a></li>
</ul>
<div id="product1" class="switch">Product 1</div>
<div id="product2" class="switch">Product 2</div>

我的JS：

$(function() {
    var anc = window.location.href.split('#')[1];
    $('#' + anc + '.switch').show();

    $('a.panlink').click(function() {
        $('.switch').hide();
        $($(this).attr('href')).show();
    });
});

和我的CSS：

.switch { display: none; }

我已经搜索过高低，我似乎无法找到答案 - 只有来自切换一个div的答案。

如果您需要澄清，请告诉我 - 谢谢！：）

Answer 1

这是一种可能对您有益的方法。

如果您想将任何相关网页与当前页面进行比较，请在.on('click', 'class-of-product', function() {});方法中使用jQuery的AJAX流程将数据提取到当前页面。您可能还需要使用filter()方法来减少从产品页面中提取的设置元素的数量。

通过单击另一个页面中的一个链接切换两个div

1 个答案: