如何从许多子菜单项中将外部div加载到master.html div中

Question

我正在使用一个子菜单来显示来自master.html文件中div中的外部html文件的div。

我浏览了至少20个类似的相关示例，但是我一生都无法使我的代码正常工作，而且不幸的是，我知道为什么我不知道如何解决问题。

所以我在css中定义了一个子菜单：

#subnav ul li#subone a:hover{color:#ffffff; background-color: #1e3435;}

我有master.html和html子菜单

<div id="subnav" >
    <ul>
        <li id="subone"><a href="#">About</a></li>
        <li id="subtwo"><a href="home.html">Home</a></li>

</div>

而且我在标头中包含的jquery.js中使用此javascript代码：

<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
    $(".subnav ul li a") .click(function(e){
        e.preventDefault()
        $('#content2').load( 'abc.html' );
    });
});
</script>

我知道这里有问题，但无法完全解决，将不胜感激。

Answer 1

乍一看：

$(".subnav ul li a").click(...)

应该

$("#subnav ul li a").click(...)

因为你已经习惯了<div id="subnav" >。使用#了id和.上课。

更新： 要从特定元素加载内容，可以使用以下命令：

$("#content2").load("abc.html  #container");

这里#container是id元素的，只有该元素的html会加载到target中div，因此请确保使用right
identifier。在jQuery网站上阅读更多内容。

更新： 您可以对所有菜单项使用一个功能/处理程序：

$(function(){
    $(".subnav ul li a") .click(function(e){
        e.preventDefault()
        $('#content2').load($(this).attr('href') + ' #content');
    });
});

确保您的所有pages/html文件都包含相同的文件，#content因此，每次单击任何菜单项时，html都将$('#content2')仅将适当的文件加载到#content页面的一部分中，并href='filename.html'为所有菜单项提供正确的链接（）。

如果您的所有页面都不相同id，#content则data-target='identifier'在每个a标记中添加一个，如下所示：

<div id="subnav" >
    <ul>
        <li><a href='abc.html' data-target='content'>Abc</a></li>
        <li><a href='def.html' data-target='someid'>Edf</a></li>
    </ul>
</div>

因此，在这种情况下，您可以使用以下内容：

$('#content2').load($(this).attr('href') + ' #' + $(this).attr('data-target'));