從另一個頁面點擊一個鏈接來切換兩個div

我正在嘗試創建一個頁面，並排比較兩個產品。到目前爲止，我爲每個單獨的產品都有一個單獨的頁面。在該單一頁面上的是一組鏈接，允許用戶選擇不同的產品進行比較。從另一個頁面點擊一個鏈接來切換兩個div

在比較頁面上，我能夠弄清楚如何切換從原始文章中提取信息的第一個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的答案。

讓我知道你是否需要澄清 - 謝謝！ :)

來源

2013-10-23 Brittany Layne Rapheal

你能澄清你的最終目標嗎？閱讀這兩次並沒有給我提供任何信息 – abc123

爲什麼不在同一頁面上列出所有的產品，並顯示網格/列布局中的差異，以便一眼就能看到它，而不是單擊以顯示比較數據......？如果網格太長，可以使用媒體查詢或jQuery插件來壓縮表格數據以做出響應。 – blackhawk

@ abc123 - 我試圖在單獨的頁面上顯示兩個產品之間的比較。在比較頁面上，它將調用包含原始產品信息的div，在比較頁面的另一個div中，它將顯示我從單一頁面上的列表中選擇的產品的信息。基本上，我想要一個URL在另一個頁面上打開兩個div。我只是不知道如何去添加我必須做的工作。 –

以下是一種可能會使您受益的方法。

如果您想將您的任何相關網頁與您當前的頁面進行比較，請使用jQuery的AJAX流程以.on('click', 'class-of-product', function() {});方法將數據提取到當前頁面。您可能還需要使用filter()方法來減少您從產品頁面提取的設置元素的數量。

來源

2013-10-23 20:43:25 blackhawk

謝謝。如果我找不到在單獨頁面上生成產品信息的方法，我會記住這一點。 :) –

從另一個頁面點擊一個鏈接來切換兩個div

回答

相關問題