動態按鈕鏈接到動態框的div或iframe容器

Question

簡而言之，我不清楚動態html或.js或ajax或.as是如何工作的，但是，在許多具有動態內容的網站上使用iframe或divisions（<div>）。基本上，有三個按鈕（div的w：150px h：30px）與一個盒子（iframe或div）在一條直線上。如果你點擊按鈕之一，它下面的框將改變爲不同的內容，而不用實際改變頁面或重新加載整個頁面。我的問題是如何成功地做到這一點？

感謝您花時間閱讀和/或回答我的問題！

有一個偉大的日子，

布蘭

車身寬度爲800像素高度爲100％ 我頭和腳都在高度50像素和主體高度大約爲2400px。在主體中，我有另一個寬度爲700px，容器左右兩邊爲50px的容器。裏面有兩個框，分別是column1和column2。 Column1保存代表我的圖像，其寬度爲300px，高度爲300px，不一定是圖像本身的確切大小。另一列2是400px：w乘300px：h。它被分解成幾部分，底部有一個400px：w×30px：h的容器。這已被分解成4個部分，每部分寬度爲100px。這房子我的動態按鈕。在列下方，div是一個獨立的部門，用於保存將會改變的內容。我將它設置爲與主容器相同的屬性（w：700px h：400px margin-left/right：50px）。這就是我陷入困境的地方，我已經在HTML中使用了Google動態內容的Google教程，但是我還沒有找到我期待的內容。一切都是花哨和高級的加載屏幕和移動圖像，而不是。我只想點擊更改不刷新，如果這是有道理的。

Answer 1

下面是一個使用JavaScript的jQuery插件的簡單示例。你可以用普通的JavaScript來做到這一點，但是這需要更多的工作。

<input class="btn" type="button" id="A" value="A"> 
<input class="btn" type="button" id="B" value="B"> 
<input class="btn" type="button" id="C" value="C"> 
<div class="lower A">A</div> 
<div class="lower B" style="display:none">B</div> 
<div class="lower C" style="display:none">C</div> 

JS：

$('.btn').click(function() { 
    $('.lower').hide()  <-- this hides everything with a class of "lower" 
    $('.'+ $(this).attr('id')).show() <--- this grabs the ID of the button and shows everything that has a class matching the ID 
}) 

Answer 2

爲了得到你需要拉這個數據從數據庫或其它網站或使用AJAX另一個網頁的動態內容。我推薦閱讀和learning JQuery，因爲它非常簡單，像其他任何語言一樣，遵循邏輯流程。 JQuery的語法也很簡單，所以它不應該太難拾取。但我離題了。

如果你的HTML結構如下：

<div id="container"> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-1">Button 1</a> 
     <div id="iframe-1"></div> 
    </div> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-2">Button 2</a> 
     <div id="iframe-2"></div> 
    </div> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-3">Button 3</a> 
     <div id="iframe-3"></div> 
    </div> 
</div> 

和你的CSS大致是這樣的：使用jQuery

.panel{ 
    float:left; 
} 

/* Initially hide all iframe divs */ 
.panel > div{ 
    display:none 
} 

/* Initially show only the first iframe div */ 
.panel > div:first-child{ 
    display:block; 
} 

，你可以使用：

//Run the code after the elements of the page have been downloaded. This is usually how most JQuery syntax starts. 
$(document).ready(function(){ 
    //When the button is clicked, run a function 
    $('.button').click(function(e){ 
     e.preventDefault(); //Prevents default click behavior; similar to defining onclick='return false;' in the <a /> tag. 
     $('.button').siblings('div').hide(); //Hide all open iframe divs 
     $(this).siblings('div').show(); //Show the iframe div corresponding to clicked link 
     var id = $(this).attr('id').replace('btn-','iframe-'); //Get the ID of the link clicked and replace 'btn-' with 'iframe-' 
     $('#'+id).load('http://<url of the page you want to load>'); //Load the new web page or content into the iframe div. This could be an absolute or relative path. 
    }); 
}); 

到類似.load()功能，也有.ajax()這個功能更多全面。另外請記住，Javascript的工作原理是它在客戶端計算機上編譯，並且在加載頁面時運行一次。因此，當獲取正被添加到頁面的HTML的動態數據時，需要爲新內容重新加載諸如點擊，懸停等任何動作。您需要使用JQuery的.on()或.delegate()事件。

希望這會有所幫助。