A no refresh documentation page and how it is done

Question

I noticed some documentation web page dose not require refresh to load the content, thus the sidebar/menu is always there and only the content is updated.

I am a graphic designer and i am creating a simple documentation page for a brand logo guide, I am not really good at backend and I am looking for a framework that would load and route navigation without constantly refreshing each page. This is not iframe i suppose.

Is this pure javascript reloading page content e.g. $( "#div" ).load( "mycontent.html" );, or what should i look into to create a similar web page?

Answer 1

Here is an example code (vanilla javascript) how you would attach an event listener to all navlinks causing the action when clicked:

/* Reload view content when changing tabs/nav-links */
var navLinks = document.getElementsByClassName("nav-link");
for (var i = 0; i < navLinks.length; i++) {
    navLinks[i].addEventListener("click", function(event){

  .... Here is the reloding stuff for the selected view 
  Simple way: insert html from predefined files like contentTabX.html (x = 1.. n)
 or load the dynamic generated content from the server/DB 

    }, false);
}

You can of course use frameworks like bootstrap4 or similar which provide some functionality, but the price is a lot of (often problematic) overhead.
The best is to learn some basic javascript (vanilla) and use code blocks from trusted sources like stackoverflow