Question

这是我的网页的（修改）jsfiddle。它有更多，而且定位是正确的，而不是：http://jsfiddle.net/ry0tec3p/1/

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

问题教程社会

我尝试在网页中间制作略微透明的黑色区域（＆＃34; center＆＃34; div。）当我点击上面的其中一个链接时改变html（看起来像网页上的几个标签），我希望标签保持选中状态，直到点击另一个标签。它不仅仅是文本，因为不同的标签会有不同的HTML。有人可以编辑jsfiddle，或者告诉我如何实现这一目标吗？

编辑：我尝试过使用：

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

$（＆＃34; .center＆＃34;）。load（＆＃34; file.html＆＃34;）; }）;

什么都没做。

另外，我已经研究了内部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!

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

1 个答案: