如何通过单击“include('menu.html')”上的菜单中的 Li 将 HTML 页面加载到 DIV 中答案

【问题标题】：How to load a HTML-page into a DIV by clicking a Li from inside a menu on an 'include('menu.html')'如何通过单击“include('menu.html')”上的菜单中的 Li 将 HTML 页面加载到 DIV 中
【发布时间】：2015-10-21 13:06:24
【问题描述】：

我有一个包含“访客”和“用户”内容的应用程序。我构建了一个 menuIn.html 和一个 menuOut.html（用于登录/注销），并通过以下方式从 MainPage.php 的 html 中调用它们。（建议来自：PHP easier way to hide/show menu items to logged in / logged out users）

include ('includes/header.html');
if (isset($_SESSION['user_id'])) { 
include('menuIn.html');
}else{
include('menuOut.html');
}

单击时，menuIn.html 中的链接会调用 jQuery 脚本，该脚本会在 SelectedPage.php 的 html 部分中放置一个 div。我的总体尝试旨在仅从菜单中更改 SelectedPage 的 div。这是我的尝试和参考。在所有 SelectedPage.php 上，即：AboutUs.php：接收 div 的代码是：

<div id="target1"></div> // On AboutUs.php
<div id="target2"></div> // On FAQs.php etc.

menuIn.html 代码：

<li><a href="About.php" class="ajaxtrigger1">Contact</a></li>
<li><a href="FAQs.php" class="ajaxtrigger2">Contact</a></li>

jQuery调用号1 call1.js：

$('.ajaxtrigger1').click(function(){
  var url = $(this).attr('href');
  $('#target1').load(url);
  return false;
});

要加载到不同 div 中的文件是 Add1.html、Add2.html Add3.html：

“Hello World1、Hello World2、3 等”

所有文件都存放在同一个目录下，jQuery.js 和 call1.js、call2.js 等都在头部引用。如果菜单不在 include('file.html') 中，我已经让它工作了，但是我没有可能为登录/注销的用户显示菜单链接。

研究过：

http://jsfiddle.net/dhirajbodicherla/bNx4g/2/（这似乎很接近，但评论很糟糕）
How to load a button from external page into a div content using Jquery load()
How to load a HTML-page into a DIV by clicking a Li inside a menu?

我愿意接受任何建议，包括完全重写。请重新阅读我的总体目标，并感谢所有帮助。谢谢。

【问题讨论】：

如果可能的话，请添加你的小提琴
所以当点击.ajaxtrigger1时它应该将add1.html渲染为#target1 div？
究竟出了什么问题？点击事件正确触发？服务器响应正确吗？
Fiddle 示例不完整，因为没有地方放置外部文件 'loadFile' 参见：jsfiddle.net/5thfeb/62npjqrb
回复 Harsh Makani....... 是的，就是这个想法。谢谢

标签： javascript php jquery css ajax

【解决方案1】：

发现我的错误。对 call1.js 的引用需要在 body 标签内（我现在将它放在底部的 body 标签内），而不是在 head 标签内。在那里工作，但不在 head 标签中！感谢您的所有帮助。

<body>
General code....then
<script src="call1.js"></script>
<script src="call2.js"></script>
<script src="call3.js"></script>
</body>

【讨论】：

【解决方案2】：

为什么你使用 javascript。而不是 javascript 只使用 iframes。像这样。

<iframe name="iframe_a"></iframe>
<iframe name="iframe_b"></iframe>
<li><a href="About.php" target="iframe_a">Contact</a></li>
<li><a href="FAQs.php" target="iframe_b">Contact</a></li>

通过这种方式，您可以轻松地在一个页面上显示不同页面的数据。

【讨论】：

他不想立即显示所有图像！询问了on click 的一些LI