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

Posted 2023-05-08

【中文标题】如何从多个子菜单项将外部 div 加载到 master.html div

【英文标题】：how to load external div into a master.html div from a number of submenu items

【发布时间】：2014-05-19 00:55:10

【问题描述】：

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

我已经查看了至少 20 个类似相关事物的示例，但我一生都无法让我的代码正常工作，不幸的是，虽然我知道为什么我不知道如何解决问题。

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

#subnav ul li#subone a:hovercolor:#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>

我知道这里有问题，但不能完全弄清楚，任何帮助将不胜感激。

【问题讨论】：

你的标题应该是一个问题，而不是标签的集合。

很抱歉，这确实是我第一次在这里发帖，并且会确保在未来如此。道歉

别担心，有时间看看***.com/tour

【参考方案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'));

【讨论】：

公平点......我只是在css中复制并粘贴了我原来的#nav并添加了#subnav......也许我应该把它变成一个类，但也许那是另一回事，感谢您指出第一眼

目前 div 标签实际上已被拉入 master.html，但似乎它并没有在 div 之间进行区分，而只是在 master.html div 区域中插入了整个 div。这是 abc.html 正文 ....

----- 这是 Web 控制台---- TypeError: $(...).nivoSlider 不是函数 index.html:41 不推荐使用 getPreventDefault()。请改用 defaultPrevented。

啊，好吧，所以我对 abc.html 的全部内容（这绝对在发生）和我只想要 abc.html 中的一个特定 div 很困惑....或者我想我可能需要为每个菜单项执行 9 次该功能

Hey Wolf 非常感谢您的更新......有几件事......首先，根据您之前的评论，它不是#submenu 也不是 .submenu 以及......我如何分配此功能适用于每个菜单项而不将其应用于 li 标签？希望你有一些休息的伙伴！