单击一个按钮，它将内容加载到主要内容区域

Question

我在左侧菜单上为“汽车”，“音乐”和“游戏”创建了3个按钮。当用户单击一个按钮时，应将适当的内容加载到主内容区域的DIV中。 每个按钮应替换div中先前显示的任何内容。 我创建了按钮，但不知道如何将内容加载到主内容div中或如何替换先前的内容。 你能帮忙吗？

Answer 1

使用jQuery 加载功能

Answer 2

<!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 OK让我们澄清一下。

上面的代码使用jQuery lib。 在此处查找有关加载功能的更多信息。

如果您不能或不想使用jQuery，请在此处查找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>

单击一个按钮，它将内容加载到主要内容区域

问题描述

2 个解决方案

解决方案1
0 2011-09-22 07:09:45

解决方案2
0 2011-09-22 07:17:21

单击一个按钮，它将内容加载到主要内容区域

问题描述

2 个解决方案

解决方案1 0 2011-09-22 07:09:45

解决方案2 0 2011-09-22 07:17:21

解决方案1
0 2011-09-22 07:09:45

解决方案2
0 2011-09-22 07:17:21