在 div 中加載內容
[英]Loading content inside a div
問題描述
我最近開始學習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>
我應該這樣做，還是有更好的方法？
謝謝 ：）
1 個解決方案
解決方案1
1 已采納 2021-11-10 07:30:49
你的代碼工作的原因，你把文檔准備好在點擊事件中你做錯了
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>
<div>內容未加載<iframe>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.