Make header and footer files to be included in multiple html pages

by

You can accomplish this with jquery.

Place this code in index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

and put this code in header.html and footer.html, at the same location as index.html

<a href="http://www.google.com">click here for google</a>

Now, when you visit index.html, you should be able to click the link tags.

More Related Contents:

  1. How to make page loaders/animations/transitions
  2. Want to make a multi page navigation menu “HTML, JS, jQuery, Bootstrap” [closed]
  3. How could I make a calendar? [closed]
  4. How to make a screen that looks like mirror in real world? [closed]
  5. How can I turn a into a link?
  6. Javascript Execute message when mouse is on left side of page [closed]
  7. Different look in desktop, how to setup
  8. How can this page scroll (it doesn’t work properly)?
  9. Replacing css file on the fly (and apply the new style to the page)
  10. Dynamically loading css stylesheet doesn’t work on IE
  11. How to silently hide “Image not found” icon when src source image is not found
  12. How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
  13. Use images like checkboxes
  14. Using jQuery how to get click coordinates on the target element
  15. Setting CSS value limits of the window scrolling animation
  16. How can I generate the opposite color according to current color?
  17. scrollTop animation without jquery [duplicate]
  18. How to swipe top down JQuery mobile
  19. How to build simple tabs with jQuery?
  20. jQuery: Slide left and slide right
  21. jQuery, image changing on hover [duplicate]
  22. How to increase width of underline for the multiline text when on hover
  23. How to get on-screen visible element objects in jQuery? [duplicate]
  24. Detect if dropdown navigation would go off screen and reposition it
  25. Iframe inherit from parent
  26. How to display file name for custom styled input file using jquery?
  27. In JQuery, Is it possible to get callback function after setting new css rule?
  28. How to create a “show more” button and specify how many lines of text can be initially shown
  29. Include SVG files with HTML, and still be able to apply styles to them?
  30. A way to scroll an underlying div when mouse is on top of a fixed div?

Leave a Comment