Question

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

Answer 1

使用jquery load函数

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>

更新好的，让我们澄清一下。

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

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

2 个答案: