Load main content with ajax
Question
I've got a navigation bar div on all my .html page. To not copy paste the nav-bar code on every page I've created an .html page with the code and I print it on every page via jquery like this:
<div id="includeNavbar"></div>
And the code to actually print it is:
$(function(){
$("#includeNavbar").load("navbar.html");
});
Is there a way to keep the nav bar loaded and load the remaining content via jquery but still using this type of printing method?
I'm using the latest Bootstrap version
1 answers
solution1
1 ACCPTED 2019-06-06 09:17:26
Your code is the simple way to load a HTML file in other html file.. keep it up.
And also you can change your html file type into php and then you can include or require that you want place .
Like this
nav-bar.php
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
And your Main.php page that where you want another page.
Main.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<?php require 'nav-bar.php'?>
</body>
</html>
Hope you find the answer. :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.