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

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

使用jquery函数

更新Ok让我们澄清一下

上面的代码使用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>

---

我不相信他在使用jQuery；因此，加载可能不合适。@David：我只是建议op使用jquery。简化生活。你应该真正解释为什么要使用jquery，而不是原生DOM JavaScript/ECMAscript函数。另外：如何使用load，因为你的建议没有回答这个问题。内容来自哪里？您应该找到一些搜索javascript dom替换内容或类似内容的示例。此外，如果您使用Ajax，还有大量Ajax示例。您好，内容来自主内容区域中的按钮和加载。是否要添加解释？此外，这假设OP正在使用jQuery。

//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>