我已經在左側菜單上爲「汽車」,「音樂」和「遊戲」創建3個按鈕當用戶單擊一個時,它應該加載將主要內容區域中的DIV 適當的內容。每個按鈕應該替換之前在div中顯示的任何東西 的內容。我創建了我的按鈕,但我不知道如何將內容加載到主內容div或如何替換以前的內容。 你能幫忙嗎?點擊一個按鈕,它應該加載內容到主要內容區域
0
A
回答
0
0
<!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>
+1
謹此添加說明?此外,這假定OP正在使用jQuery。 –
+0
稍有更新 –
相關問題
- 1. 點擊一個按鈕重新加載列表內容
- 2. 需要幫助加載按鈕的頁面內容點擊
- 3. 如何在點擊提交按鈕時僅加載內容區域?
- 4. jQuery/AJAX - 點擊按鈕時將內容加載到div中?
- 5. 加載內容點擊
- 6. 動態加載一個部門內的內容Laravel中按鈕的點擊
- 7. jQuery的內容加載到iframe中只有第一個按鈕點擊
- 8. 更改UIViewController的按鈕點擊不重新加載內容如果內容已經加載第一次
- 9. 點擊容器內容下載,將內容加載到空間顯示Jquery
- 10. jquery選項卡重新加載按鈕點擊內容
- 11. 打印一個表單的內容點擊一個按鈕
- 12. 按鈕點擊飛入內容框?
- 13. 點擊按鈕幻燈片html內容
- 14. 將動態外部內容加載到點擊的另一個
- 15. AJAX:加載內容跨域
- 16. 加載頁面內容時,點擊
- 17. HTML內容加載上點擊
- 18. 加載內容onload insted的點擊
- 19. 加載內容隱藏div後點擊
- 20. PrimeFaces sideMenu加載內容點擊LayoutUnit
- 21. Div內容無法加載點擊
- 22. 點擊加載jquery標籤內容
- 23. 通過點擊按鈕改變WordPress主頁中的div內容
- 24. 一個內容區域中的ASP.NET控件需要引用另一個內容區域中的控件
- 25. 如何在Aurelia的同一區域點擊按鈕上的頁面上的內容區域?
- 26. 按鈕點擊按鈕內容攔截的事件
- 27. 根據點擊按鈕更改按鈕內容
- 28. UIWebView加載內容點播
- 29. 在按鈕單擊重新加載內容(ajax)在選項卡
- 30. TreeView在點擊按鈕後不斷添加內容
哪裏的內容從何而來?你應該找一些搜索'javascript dom replace content'(或類似的)的例子。此外,還有大量的Ajax示例(如果您使用Ajax)。 –
你好,內容來自主要內容區域中的按鈕和加載。 –