點擊一個按鈕，它應該加載內容到主要內容區域

我已經在左側菜單上爲「汽車」，「音樂」和「遊戲」創建3個按鈕當用戶單擊一個時，它應該加載將主要內容區域中的DIV 適當的內容。每個按鈕應該替換之前在div中顯示的任何東西的內容。我創建了我的按鈕，但我不知道如何將內容加載到主內容div或如何替換以前的內容。你能幫忙嗎？點擊一個按鈕，它應該加載內容到主要內容區域

來源

2011-09-22 Jean Humphries

哪裏的內容從何而來？你應該找一些搜索'javascript dom replace content'（或類似的）的例子。此外，還有大量的Ajax示例（如果您使用Ajax）。 –

你好，內容來自主要內容區域中的按鈕和加載。 –

使用jQuery load功能

來源

2011-09-22 07:09:45 Gowri

我不相信他在使用jQuery;因此'load（）'可能不合適。 –

@David：我只是推薦使用jquery.Make簡單的生活 – Gowri

然後你應該真的解釋*爲什麼*使用jQuery，而不是本地DOM JavaScript/ECMAscript函數。另外：*如何*使用'load（）'，因爲你的建議沒有回答這個問題。 –

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Title of the document</title> 
<script src="../js/jquery.js"></script> 
<script> 
    function load(url){ 
     $('#content').load(url); 
    } 
</script> 
</head> 

<body> 
    <button onclick='load("url1");'>Content 1</button> 
    <button onclick='load("url2");'>Content 2</button> 

    <div id='content'></div> 
</body>

UPDATE確定可以澄清這一點。

上面的代碼使用jQuery lib。查看here瞭解更多關於加載功能的信息。

如果你不能或不想使用jQuery的外觀here JS解決方案。

如果您希望只使用靜態的內容，那麼你有兩個選擇另：

//1: if the new content is only small portion of info text 
<script> 
    function load(newContent){ 
    document.getElementById('content').innerHTML = newContent; 
    } 
</script> 
<button onclick='load("some text 1");'>Content1</button> 
<button onclick='load("another text 2");'>Content2</button> 

<div id='content'></div> 

//2: put content directly to your page the several DIVs and hide them 
<script> 
    function show(index){ 
    var n=2; // number of DIVs 

    //show desired content and hide any others 
    for(var i=1; i<=n; i++){ 
     document.getElementById('content'+i).style.display = i == index ? 'block' : 'none'; 
    } 
    } 
</script> 

<button onclick='show(1);'>Content 1</button> 
<button onclick='show(2);'>Content 2</button> 

<div id='content1'></div> 
<div id='content2' style='display:none;'></div>

來源

2011-09-22 07:17:21

謹此添加說明？此外，這假定OP正在使用jQuery。 –

稍有更新 –

點擊一個按鈕，它應該加載內容到主要內容區域

回答

相關問題