如何通过单击链接更改 div 的内容？

Question

这是我网页的（修改后的）jsfiddle。它还有很多，而且定位是正确的，与此相反：http://jsfiddle.net/ry0tec3p/1/

<a href="" class="btn1" style="position: absolute; margin-left: -640px; margin-top: 167px;">About</a>   

问题 教程 社交

当我点击上面的链接之一（看起来像网页上的几个标签）时，我正在尝试使网页中间稍微透明的黑色区域（“中心”div。）更改 html ，并且我希望该选项卡保持选中状态，直到单击另一个选项卡。它不能只是文本，因为不同的选项卡会有不同的 HTML。有人可以编辑 jsfiddle，或者告诉我如何做到这一点吗？

编辑： 我试过使用：

$(".btn1").click(function(){

$(".center").load("file.html"); });

什么都没做。

另外，我已经研究过内部 HTML，但我尝试将其实现到其中的尝试失败了，因为我无知。

Answer 1

如果您尝试在本地运行它，您可能会发现它不起作用，您必须在实时服务器上安装它。 并且与您调用的文件在同一个域中

这是 jQuery，所以请确保您有一个链接到 jQuery 的脚本标签！

HTML

<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>

jQuery

$(document).ready(function(){ //All jQuery should go in this ready function
       //  Onclick function
        $('.Navigation').click(function () {   
      // this.id = to the ID of the element being clicked
        $('#PageData').load(this.id+".html");
        }); 
});

您只需将其用于您现有的源代码即可。 您可以将class="Navigation" 应用于您想要用来触发该函数的任何元素，但它将使用该元素的ID 来加载页面。

带有id 的汽车按钮示例将尝试加载cars.html

我希望这会有所帮助。快乐编码！ :)

WORKING DEMO!