使用java将HTML页面从容器内的页面加载到容器中

我对编码还不熟悉，这是我第一次来这里，所以请放松：）

另外，请随时告诉我，这是一个愚蠢的方式来达到预期的效果

我正在开发公司内部网页面，并已开始将页面加载到index.php页面内的容器中。这很好用

我遇到的问题是，对于我在加载到容器中的页面中创建的按钮，这种方法不起作用

例如：

index.html

       <ul class="nav navbar-nav">
            <li><a href="#" id="load_HR"> HR</a>
            </li>
            <li><a href="#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="#" id="load_info"> Info</a>
            </li>
            <li><a href="#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    $("#content").load("HR.html");
});
    $("#load_FAQ").on("click", function() {
    $("#content").load("FAQ.php");
});
    $("#load_Info").on("click", function() {
    $("#content").load("info.html");
});
    $("#load_directory").on("click", function() {
    $("#content").load("directory.php");
});
});

<div id="content"></div>  

index.html










$（文档）.ready（函数（）{
$（“加载人力资源”）。在（“单击”，函数（）上{
$（“#content”）.load（“HR.html”）；
});
$（“加载FAQ”）。在（“单击”，函数（）上{
$（“#content”）.load（“FAQ.php”）；
});
$（“#加载信息”）。在（“单击”，函数（）上）{
$（“#content”）.load（“info.html”）；
});
$（“#加载_目录”）。在（“单击”，函数（）{
$（“#content”）.load（“directory.php”）；
});
});

这就是我的导航栏按钮将页面加载到容器中的方式，工作正常

现在我想将HR.html页面中的一个页面加载到当前由HR.html页面占用的容器中

看起来很简单，听起来很复杂，我在兜圈子

---

请帮忙！：）

看起来JQuery.load（）函数试图执行XMLHttpRequest 这将导致以下错误

无法加载跨源请求仅支持协议方案：http、data、chrome、chrome扩展、https。

尝试使用简单的JS，它对我很有用

$（文档）.ready（函数（）{
$（“加载人力资源”）。在（“单击”，函数（）上{
document.getElementById（“内容”）.innerHTML=''；
})；

所以你的代码应该是这样的

       <ul class="nav navbar-nav">
            <li><a href="#" id="load_HR"> HR</a>
            </li>
            <li><a href="#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="#" id="load_info"> Info</a>
            </li>
            <li><a href="#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="HR.html" ></object>';
});
    $("#load_FAQ").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="FAQ.php" ></object>';
});
    $("#load_Info").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="info.html" ></object>';
});
    $("#load_directory").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="directory.php" ></object>';
});
});

<div id="content"></div> 

$（文档）.ready（函数（）{
$（“加载人力资源”）。在（“单击”，函数（）上{
document.getElementById（“内容”）.innerHTML=''；
});
$（“加载FAQ”）。在（“单击”，函数（）上{
document.getElementById（“内容”）.innerHTML=''；
});
$（“#加载信息”）。在（“单击”，函数（）上）{
document.getElementById（“内容”）.innerHTML=''；
});
$（“#加载_目录”）。在（“单击”，函数（）{
document.getElementById（“内容”）.innerHTML=''；
});
});

我找到了我的jQuery答案：

通过将此函数添加到加载到内容容器中的页面 例如，当我加载HR.html页面时：

function loadbenefits() {
    $('#hrContent').load('CompanyBenefits.html');
}

然后使用onClick（=“loadbenefits（）”按钮将新页面加载到容器中，如下所示：

一些文本

感谢您的帮助DevKimo！我最终发现我可以通过向加载到容器中的页面添加函数来解决问题。

<button onClick="loadbenefits()" class="btn" type="button" value="Go"> Some Text </button>