javascript - 如何使用选项卡将 HTML 加载到单个 div 中

Question

我设置了脚本来在带有菜单项的页面上切换显示/隐藏 div。

但是，我想将外部 HTML 加载到其中之一中，但遇到了问题。

现在我只想让菜单项将外部 HTML 加载到单个 div 中。

我似乎无法让它工作，但我想要一个像这样的菜单:

<div id="topmenu">
<a href="#" >Home</a>
<a href="#" >Videos</a>
<a href="#" >Follow</a>
<a href="#" >Contact</a>
</div>

每个元素使用 jQuery 将不同的 HTML 加载到 div 中，如下所示:

<article>
<div id="bodycontent">
...
</div>
</article>

Answer 1

如果你想添加或意味着加载外部html，那么你需要添加一些java脚本。让我们举个例子。

    <div id="topmenu">
<a href="#" id='homeTab'>Home</a>
<a href="#" id='videoTab'>Videos</a>
<a href="#" id='followTab'>Follow</a>
<a href="#" id='contactTab'>Contact</a>
</div>

看到我已经为每个添加了单独的 id，现在您需要调用 js 的加载函数

$("#homeTab").on('click',function(){
    //firstly clear html part
    $('#bodycontent').html('');
    $('#bodycontent').load('hometab.html');//put your exact loaction of html file in my case I'm assume both are in same folder.
});

这就是你能做的一切。

希望它对您有用。