在 div 中加载内容答案

【问题标题】：Loading content inside a div在 div 中加载内容
【发布时间】：2021-11-10 01:58:11
【问题描述】：

我最近开始学习 JavaScript，最近一直在做一些练习来获得技能，但我不知道我是否在这方面做得对。

我正在尝试在 div 中加载一个页面，该页面将在按下横幅上的按钮后显示给用户。

document.getElementById("btnConta").addEventListener("click", function() {
  $(document).ready(function() {
    $("#content").load("http://127.0.0.1:5500/conta.html");
  });
});

document.getElementById("btnDenuncia").addEventListener("click", function() {
  $(document).ready(function() {
    $("#content").load("http://127.0.0.1:5500/denuncia.html");
  });
});

document.getElementById("btnConta").addEventListener("click", function() {
  window.location.href = "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>Pág. Inicial</title>
  <link href="pagInicial.css" rel="stylesheet">

  <script type="module" src="pagInicial.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

</head>

<body>
  <div class="wrapper">
    <header role="banner">
      <nav>
        <div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div>
        <div class="menu">
          <ul>
            <a id="btnDenuncia" class="btn btn1">Denuncias</a>
            <a id="btnConta" class="btn btn1">Conta</a>
            <a id="btnLogout" href="#"><button>Logout</button></a>
          </ul>
        </div>
      </nav>
    </header>
    <div class="content" id="content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p>
    </div>
  </div>
</body>

</html>

我应该一直这样做，还是有更好的方法？

谢谢你:)

【问题讨论】：

好像要切换页面，可以尝试使用nav
您在事件侦听器中的ready 侦听器实际上不起作用。如果文档还没有准备好，你一开始就无法添加事件监听器。
您可以使用 iframe 在您的 div 中加载第三方 HTML 页面，或导航到该页面

标签： javascript html jquery ajax

【解决方案1】：

你的代码工作的原因，你把文档准备好点击事件在这里你做错了

document.getElementById("btnConta").addEventListener("click", function () {
    $(document).ready(function () {
        $("#content").load("http://127.0.0.1:5500/conta.html");
    });
});

您只准备了一次 DOM，并将所有点击事件放入其中，如下所示

   $(document).ready(function () {
    document.getElementById("btnConta").addEventListener("click", function () {
        $("#content").load("https://stackoverflow.com/users/8384983/neeraj);
    });
    document.getElementById("btnDenuncia").addEventListener("click", function () {
        $("#content").load("https://stackoverflow.com/users/8384983/neeraj");
    });
});

由于跨域阻止打开 URL，它在此处无法正常工作，您现在可以在代码中检查它，它可以正常工作。

  <!DOCTYPE html>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
        $(document).ready(function () {
        document.getElementById("btnConta").addEventListener("click", function () {
            $("#content").load("https://stackoverflow.com/company");
        });
        document.getElementById("btnDenuncia").addEventListener("click", function () {
            $("#content").load("https://stackoverflow.com/company");
        });
    });
        </script>
        </head>
        <body>
         <div class="wrapper">
            <header role="banner">
              <nav>
                <div class="logo"><img class="logo" src="Imagens/Logo2.png" alt="logo"></div>
                <div class="menu">
                  <ul>
                    <a id="btnDenuncia" class="btn btn1">Denuncias</a>
                    <a id="btnConta" class="btn btn1">Conta</a>
                    <a id="btnLogout" href="#"><button>Logout</button></a>
                  </ul>
                </div>
              </nav>
            </header>
            <div class="content" id="content">
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit </p>
            </div>
          </div>
        </body>
        </html>

【讨论】：