如何通過鏈接點擊更改div的內容？

-5

這是我的網頁（修改）jsfiddle。它有相當多的，定位是正確的，而不是這樣的：http://jsfiddle.net/ry0tec3p/1/如何通過鏈接點擊更改div的內容？

<a href="" class="btn1" style="position: absolute; margin-left: -640px; margin-top: 167px;">About</a>

問題教程社會

我試圖使略微透明的黑色區域的中間當我點擊上面的鏈接之一（這看起來像網頁上的幾個標籤）時，網頁（「中心」div）會更改html，並且我希望選項卡保持選中狀態，直到單擊其他鏈接。它不能只是文字，因爲不同的標籤會有不同的HTML。有人可以編輯jsfiddle，或告訴我如何做到這一點？

編輯：我已經嘗試使用：

$(".btn1").click(function(){

$（「中心」）的負載（「file.html」）; }）;

什麼都沒做。

另外，我已經研究了內部HTML，但是我的實現它的嘗試失敗了，因爲我無知。

來源

2015-02-11 Beck

已編輯。檢查原件。 – Beck 2015-02-11 19:25:10

因此，您希望按鈕在外部頁面中加載，這些頁面的名稱與按下的按鈕ID相同嗎？如果是這樣，您可以定位正在點擊的按鈕ID以設置您所調用的文件的名稱。 – NewToJS 2015-02-11 19:26:56

是的。當按下ID爲「about」的按鈕時，我試圖將「center」div的內容替換爲「about.html」的內容。 – Beck 2015-02-11 19:30:41

如果您嘗試在本地運行它，您可能會發現它不起作用，您必須在活動的服務器上安裝它。 並在與您要求的文件相同的域名

這是jQuery，所以請確保您有腳本標記鏈接到jQuery！

HTML

<button id="home" class="Navigation">Home</button> 
<button id="about" class="Navigation">About Us</button> 
<button id="contact" class="Navigation">Contact Us</button> 
<div id="PageData">Data Will Display Here</div>

jQuery的

$(document).ready(function(){ //All jQuery should go in this ready function 
     // Onclick function 
     $('.Navigation').click(function() { 
     // this.id = to the ID of the element being clicked 
     $('#PageData').load(this.id+".html"); 
     }); 
});

所有你需要做的工作到您現有的源代碼這一點。您可以將class="Navigation"應用於您想要用來觸發該功能的任何元素，但會使用該元素的ID加載該頁面。

例與汽車的id按鈕將嘗試加載cars.html

我希望這有助於。快樂的編碼！ :)

WORKING DEMO!

來源

2015-02-11 20:10:24 NewToJS

這似乎沒有工作。我問了另一個網站的主人，他給了我一個辦法。不過謝謝你！ – Beck 2015-02-11 23:16:43

這是因爲它不適合您複製/粘貼。這確實有效，但你必須將該函數插入到你的網站，並將類的屬性設置爲你想要的元素或者改變函數中的類來適合。我們不會爲你做所有的工作，我們幫助人們調試他們的代碼並使其工作。你可以用'工作演示'來查看它自己 – NewToJS 2015-02-12 00:20:05

如何通過鏈接點擊更改div的內容？

回答

相關問題