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

【问题标题】：Toggling two divs with the click of one link from another page通过单击另一个页面中的一个链接来切换两个 div
【发布时间】：2013-11-02 06:53:01
【问题描述】：

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

在比较页面上，我能够弄清楚如何切换从原始帖子中提取信息的第一个 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 的答案。

如果您需要澄清，请告诉我 - 谢谢！ :)

【问题讨论】：

你能稍微澄清一下你的最终目标吗？读这两次没有给我任何东西
为什么不在同一页面上列出所有产品，并在网格/列布局中显示差异，以便一次查看所有内容，而不是单击显示比较数据... ?如果网格太长，请使用媒体查询或 jquery 插件来压缩表格数据以进行响应。
@abc123 - 我试图在单独的页面上显示两种产品之间的比较。在比较页面上，它会调用一个包含原始产品信息的 div，在比较页面的另一个 div 中，它会显示我从单篇页面的列表中选择的产品的信息。基本上，我想要一个可以在另一个页面上打开两个 div 的 URL。我只是不确定如何添加我必须完成的工作。
@BrittanyLayneRapheal 对，在不了解您的后端语言或架构（restFUL api，或仅传递 viewState）的情况下，我们不能只为您编写随机代码。
@Blackhawk - 不幸的是，我不能在一页上完成所有操作。我正在为客户重新创建一个 Wordpress 主题，格式、布局和功能必须相同。

标签： javascript jquery html toggle hyperlink

【解决方案1】：

这是一种可能使您受益的方法。

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

【讨论】：

谢谢。如果我找不到在单独页面上生成产品信息的方法，我会记住这一点。 :)