时间戳

首页 > 解决方案 > 从单独的 HTML 文件加载导航栏不起作用

jquery - 从单独的 HTML 文件加载导航栏不起作用

问题描述

在阅读了 Stack Overflow 上的其他几篇文章后，我决定使用 jQuery 方法将导航栏添加到index.html其代码位于header.html. 但是，导航栏没有显示在 上index.html，并且控制台显示“访问 XMLHttpRequest 错误”。有人可以告诉我为什么会出现这个错误吗？

这是我的 index.html 的 HTML：

<!DOCTYPE html>
<html>

<head> 


    <link href="header+footer.css" rel = "stylesheet" type="text/css" />
    <link href="index.css" rel = "stylesheet" type="text/css" />

     <meta charset="utf-8">
    <title> The Novel Column - Book Reviews </title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 

    <script> 
        $(function(){
        $("#includedContent").load("header.html"); 
        });
    </script> 

 </head> 


<body>


     <div id="includedContent"></div>

这是我的 header.html 的 HTML：

<nav>
    <img class="logo" src="images/other/logo.jpg">

    <h1> <a href="index.html"> The Novel Column </a> </h1>

    <ul>

      <li> <a href="about.html"> About </a> </li>
    </ul>



</nav>

在此先感谢您的帮助！

标签： jqueryhtmlcss

解决方案

您可以简单地包含 jQuery.js 并使用加载 HTML 文件

$("#DivContent").load("yourFile.html");

例如

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
      $(function(){
       $("#DivContent").load("another_file.html"); 
      });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

注意：在 load() 方法中，确保您正在编写外部文件的正确路径。
当您在服务器上运行代码时，XMLHttpRequest 错误将得到解决。在本地，您可以使用 XAMPP 进行测试

有一些像这样的第三方方法可用。 

<!DOCTYPE html>
<html>
 <script src="http://www.w3schools.com/lib/w3data.js"></script>

 <body>

  <div w3-include-html="content.html"></div> 

  <script>
    w3IncludeHTML();
  </script>

 </body>
</html>

我希望，我的回答能帮助你理解。谢谢

推荐阅读