如何使用选项卡将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 scrip.Let以你的例子。

    <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.
});

就是这样，你可以这样做。

希望它能为你效劳。