如何从多个子菜单项将外部 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会被加载到目标div，所以请确保你使用了正确的identifier。阅读更多jQuery website。

更新：您可以为所有菜单项使用一个函数/处理程序：

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

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

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

<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'));