$(function(){ $.get("header.html", function(data){ $("#header").html(data); }); }); So I am eventually going to have to do this in java but for now I just want to do this in the javascript extension known as jquery but any format that makes this work will please me.
I have 2 files: header.html
<!-- Header --> <div class="row navigationBar"> <!-- Company Logo --> <div class="col-2"> <img src="images/GCB.png" alt="GCB-logo" class="gcb-logo"> </div> <!-- Top Bar --> <div class="col-md-10"> <div class="top-navigationBar"> <nav class="navbar navbar-expand-md quick-help"> <!-- Collapse Button --> <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Quick Help --> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link black-font blue-line" href="">CONSULTATION</a> </li> <li class="nav-item"> <a class="nav-link black-font blue-line" href="">CUSTOMER SUPPORT</a> </li> <li class="nav-item"> <a class="nav-link black-font blue-line" href="">TIẾNG VIỆT</a> </li> </ul> </div> </nav> </div> <!-- Bottom Bar --> <div> <nav class="navbar navbar-expand-md bottom-navigationBar"> <div class="row bottom-navigationBar"> <!-- Quick Navigation --> <div class="col-4"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <button type="button" class="btn btn-primary btn-sm thick-font button-flat-bottom">Checking</button> </li> <li class="nav-item"> <button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Savings</button> </li> <li class="nav-item"> <button type="button" class="btn btn-outline-secondary btn-sm thick-font button-flat-bottom">Loans</button> </li> </ul> </div> <!-- Bank Name --> <div class="col-md-4"> <h1 class="bank-name">Go<span class="orange-text">Com</span>Bank</h1> </div> <!-- Login Form --> <div class="login-container"> <form action="/action_page.php"> <input type="text" placeholder="Username" name="username"> <input type="text" placeholder="Password" name="psw"> <button type="button" class="btn btn-primary btn-sm">Login</button> </form> </div> </div> </nav> </div> </div> </div> <!-- Header End --> and the webpage webpage.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="header"></div> </body> </html> I am trying to load header.html and set it into the id=("header") of webpage.html
Currently the only code that works is $("#header").html("") Using this format I can set things like
<p>Hello World</p> but it doesn't work when I want to add the loaded header.html items.
https://stackoverflow.com/questions/66147588/html-css-javascript-jquery-load-the-contents-of-one-html-file-and-load-it-ins February 11, 2021 at 09:35AM
没有评论:
发表评论