如何通過單擊“ include（'menu.html'）”菜單內的Li來將HTML頁面加載到DIV中

Question

我有一個具有“來賓”和“用戶”內容的應用程序。 我構建了menuIn.html和menuOut.html（用於登錄/注銷），並以以下方式從MainPage.php的html中調用它們。 （建議自： PHP更簡單的方法來隱藏/顯示菜單項以登錄/注銷用戶）

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

單擊時，menuIn.html中的鏈接將調用jQuery腳本，該腳本將div放置在SelectedPage.php的html部分中。 我的總體嘗試旨在僅從菜單更改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呼叫number1 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/ （這似乎很近，但評論很糟）
如何使用Jquery load（）從外部頁面將按鈕加載到div內容中
如何通過單擊菜單內的Li將HTML頁面加載到DIV中？

我願意接受任何建議，包括全面重寫。 請重新閱讀我的總體目標，感謝所有幫助。 謝謝。

Answer 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>

Answer 2

為什么要使用javascript。請使用iframe代替javascript。

<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>

通過這種方式，您可以輕松地在單個頁面上顯示不同頁面的數據。

如何通過單擊“ include（'menu.html'）”菜單內的Li來將HTML頁面加載到DIV中

問題描述

2 個解決方案

解決方案1
0 2015-10-22 10:39:51

解決方案2
-1 2015-10-21 13:24:11

如何通過單擊“ include（&#39;menu.html&#39;）”菜單內的Li來將HTML頁面加載到DIV中

問題描述

2 個解決方案

解決方案1 0 2015-10-22 10:39:51

解決方案2 -1 2015-10-21 13:24:11

如何通過單擊“ include（'menu.html'）”菜單內的Li來將HTML頁面加載到DIV中

解決方案1
0 2015-10-22 10:39:51

解決方案2
-1 2015-10-21 13:24:11