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

-5

这是我的网页（修改）jsfiddle。它有相当多的，定位是正确的，而不是这样的：http://jsfiddle.net/ry0tec3p/1/如何通过链接点击更改div的内容？

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

问题教程社会

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

编辑：我已经尝试使用：

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

$（ “中心”）的负载（ “file.html”）; }）;

什么都没做。

另外，我已经研究了内部HTML，但是我的实现它的尝试失败了，因为我无知。

来源

2015-02-11 Beck

已编辑。检查原件。 – Beck 2015-02-11 19:25:10

因此，您希望按钮在外部页面中加载，这些页面的名称与按下的按钮ID相同吗？如果是这样，您可以定位正在点击的按钮ID以设置您所调用的文件的名称。 – NewToJS 2015-02-11 19:26:56

是的。当按下ID为“about”的按钮时，我试图将“center”div的内容替换为“about.html”的内容。 – Beck 2015-02-11 19:30:41

如果您尝试在本地运行它，您可能会发现它不起作用，您必须在活动的服务器上安装它。 并在与您要求的文件相同的域名

这是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!

来源

2015-02-11 20:10:24 NewToJS

这似乎没有工作。我问了另一个网站的主人，他给了我一个办法。不过谢谢你！ – Beck 2015-02-11 23:16:43

这是因为它不适合您复制/粘贴。这确实有效，但你必须将该函数插入到你的网站，并将类的属性设置为你想要的元素或者改变函数中的类来适合。我们不会为你做所有的工作，我们帮助人们调试他们的代码并使其工作。你可以用'工作演示'来查看它自己 – NewToJS 2015-02-12 00:20:05

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

回答

相关问题