使用 jQuery 将 HTML 文件用作其他 HTML 文件的模板时出现问题答案

【问题标题】：Problem using HTML file as template for other HTML files using jQuery使用 jQuery 将 HTML 文件用作其他 HTML 文件的模板时出现问题
【发布时间】：2021-05-26 16:46:19
【问题描述】：

我正在尝试完成一项练习。在练习中，您将创建四个文件：index.html、home.html、about.html 和 contact.html。使用 jQuery 的 .load 函数，您应该能够使用 index.html 作为模板并在其中加载其他文件（仍然可以看到 index.html 导航栏）。相反，其他 html 文件似乎完全取代了浏览器中的 index.html。我不知道为什么。我正在按照练习说明进行操作。

代码如下：

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Multi-Page Site & Template</title>
    </head>
    <body>
        <nav>
            <a href="home.html">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
        <h1>Index Page</h1>
        Here is where the Index Page is.
        <div id="content">
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256- 
        u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
        <script>
            $(function() {
                $("#content").load("home.html");
                $("nav a").click(function() {
                    var href = $(this).attr("href");
                    $("#content").load(href);
                    return false;
                });
            });
        </script>
    </body>
    </html>

home.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Home Page</title>
    </head>
    <body>
        <h1>Home Page</h1>
        <p>
            This is the home page. All content has been edited for brevity.
        </p>
    </body>
    </html>

关于.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>About Page</title>
    </head>
    <body>
        <h1>About Page</h1>
        <h2>Things to know about the About Page</h2>
        <ol>
            <li>It's named About Page</li>
            <li>It has no styling</li>
            <li>It's very short</li>
        </ol>
    </body>
    </html>

contact.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Contact Page</title>
    </head>
    <body>
        <h1>Contact Page</h1>
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Billy</td>
                <td>Blazer</td>
                <td>41</td>
            </tr>
        </table>
    </body>
    </html>

练习说 return false 应该防止其他页面替换 index.html。为什么这不起作用，或者代码还有什么问题？

谢谢！

【问题讨论】：

标签： html jquery

【解决方案1】：

请将您的代码更改为以下代码：这样type="type/html"就变成了type="text/html"

$(function() {
     $("nav a").click(function() {
        var href = $(this).attr("href");
        $("#content").html('<object type="text/html" data="'+ href +'">        
         </object>');
        return false;
      });
  });

【讨论】：

你应该解释为什么原版不起作用，你做了什么不同，为什么你的起作用。 “复制/粘贴”不是很有用。
在我的回答中 type="type/html" 改为 type="text/html"
您应该编辑您的问题以添加该信息。评论很容易被删除。
感谢您的建议。我添加它。
你说你更新了type="type/html"，但我在原始代码中的任何地方都没有看到，所以它似乎是添加的，而不是更新的。我在原始代码中也没有看到任何<object></object>，所以你的解释看起来有点不对劲。好像你添加了一些东西，但没有提到任何东西。