如何使用 jQuery 用另一个 html 文件替换当前的 index.html 正文内容？

Question

我有一个简单的博客代码示例，其中包含 3 个导航按钮主页/所有帖子/关于我/，它将 Markdown 故事更改为 html。 代码如下所示：

<div class="container-md">
  <img src="assets/ico/android-chrome-192x192.png" class="rounded float-left" alt="..." height="42" width="42">
  <ul class="nav nav-tabs justify-content-end">
    <li class="nav-item">
      <a class="nav-link active" href="//test.net">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="allPosts" onclick="allStories()" href="#">All posts</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About me</a>
    </li>
  </ul>
</div>
<br>
<div class="container-sm">
  <zero-md src="stories/how-to-install-aws-bucket-software-centos7.md"></zero-md>
</div>

function allStories() {
  console.log("Works")
  $("#allPosts").load("pages/allstories.html");
}

现在，如果我点击导航按钮 - 所有帖子 - 它会添加来自

页面/所有故事.html

在按钮区域。 但我的目标是取代

<zero-md src="stories/how-to-install-aws-bucket-software-centos7.md"></zero-md>

包含新的 allstories.html 内容的内容。 我怎样才能做到这一点？

任何帮助表示赞赏！

Answer 1

1. 为 container-sm 和 zero-md 划分提供 id 然后尝试像这个function allStories(){ $(#zero-md).hide(); $(#container1).load("pages/allstories.html"); } function allStories(){ $(#zero-md).hide(); $(#container1).load("pages/allstories.html"); }