我怎样才能改变正文内容onclick一些按钮

Question

我正在使用 JQuery 加载我网站的导航栏和正文，我想更改正文内容 onclick 导航栏中的某个按钮我可以使用 JavaScript 来做到这一点吗？我怎么能？

拜托，我一直在寻找解决方案，但我没有找到任何东西。提前致谢

html

 <header>
      <script>
        $(function () {
          $("header").load("./dist/includes/navbar.html");
        });
      </script>
    </header>
    <!-- END of Section NavBar  -->
    <main>
      <script>
        $(function () {
          $("main").load("./dist/includes/home.html");
        });
      </script>
    </main>
    <!-- Section Footer  -->
    <footer class="footer">
      <script>
        $(function () {
          $("footer").load("./dist/includes/footer.html");
        });
      </script>
    </footer>

我想在单击带有 id="nav-link"

的按钮时更改 home.html 加载的文件

这是截图

Answer 1

考虑以下代码。

$(function() {
  // Load content
  $("header").load("./dist/includes/navbar.html");
  $("main").load("./dist/includes/home.html");
  $("footer").load("./dist/includes/footer.html");

  // Prpgram Events
  $("header").on("click", "button", function(ev) {
    console.log("Nav Button was clicked");
    $("main p").append("<a href='#'>New Page</a>");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Section NavBar  -->
<header></header>
<!-- END of Section NavBar  -->
<main></main>
<!-- Section Footer  -->
<footer class="footer"></footer>
<!-- END of Section Footer  -->

我们使用 jQuery 加载内容。由于 ready 上的 DOM 中不存在内容，我们将使用 .on() 委托事件回调对现在已加载的项目。

所以如果下面的HTML被添加到header，例如：

<button>Show Link</button>

当点击它时，它将执行匿名回调并将 link 附加到 main.

查看更多：https://api.jquery.com/on/

最好使用Server-Side脚本来构造HTML。他们中的许多人都有一个包含特性或功能，可以在将页面发送到浏览器之前将页面添加到输出中，以便客户端可以预先处理所有内容。

我怎样才能改变正文内容onclick一些按钮

How can I change the body content onclick some button

html

javascript

jquery

local

pageload