同時將2個html頁面加載到單獨的div中

Question

我有一個index.html頁面，頁面中央有一個水平導航欄。有6個導航按鈕（about_us，faqs等等）。現在在導航欄上方有一個名爲＃container_1的div，在導航欄下方有一個名爲＃container_2的div。

我已經得到了代碼，所以我的導航欄將使用jQuery將相應的html內容加載到導航欄上方的div＃container_1中。

但是，我需要做的是當我點擊適當的導航按鈕，然後兩個div將同時加載其各自的HTML頁面。

例如，當我點擊about_us按鈕時，它會將'about_us.html＃content'加載到div＃container_1以及'about_us_2.html＃content'到div container_2中。

當然，我錯過了一些簡單的東西。

我粘貼了我的代碼到目前爲止。

我的jQuery：

$(document).ready(function() { 
$('#navigation a').click(function() { 
    $('#slider_1').hide(); 
    $('#slider_1').load($(this).attr('href')).slideDown(1000); 
    return false; 
}).eq(0).click(); 
}); 

而我的HTML代碼：

<div id="container_1"> 
<div id="slider_1"></div> 

<div id="navigation"> 
<a href="aboutus.html#content"><img src="images/btn_aboutus.jpg" border="0" /></a> etc etc etc ... 

<div id="container_2"> 
<div id="slider_2"></div> 
</div> 

有什麼想法？

Answer 1

你可以試試這個代碼爲例：

http://codepen.io/anon/pen/qdwLC