Estoy tratando de cargar un archivo externo dentro de mi HTML, pero no pasa nada.
Mi archivo HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Double Navigation Bar</title> <link rel="stylesheet" href="Mainpage.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src= "mainp.js"></script> </head> <body> <div class="nav1" id="nav1"> <ul> <li><a href="SchoolHistory">School History</a></li> <li><a href="SchoolTimes">School Times</a></li> <li><a href="SchoolFees">School Fees</a></li> <li><a href="" id="reason">Why?</a></li> </ul> </div> <div id="article" class="article"></div> <div class="aside">Aside</div> <div class="footer"> <p>Contact Number: • Email Address: </p> </div> </div> </body> </html>Mi archivo js
$(document).ready(function(){ $("reason").click(function(){ $("#article").load("Reason.html"); }); });Este es el archivo externo que estoy tratando de ejecutar. Motivo.html
<H1>Reasons Page</H1>