Open other URL in <body> using hash # without leave URL

I have two HTML file, index.html and about.html.
I wanna open my about.html in my index.html without leave my index.html.

If I see, most website using #about, so they can load about.html in their index.html with replacing maybe some div in their index to about.html.

im not sure this is what you want to do but if you want to display the about.html page somewhere in the index page there is something in HTML called iframe:
https://www.w3schools.com/html/html_iframe.asp

But if you want something more dynamically you should look into AJAX and stuff like that as suggested in the comments.

You can do this by using simple Ajax requests with pure javascript. I wrote a function which gets a url-hash like #about and loads about.html then put the whole content into .container element of the index page:

// Container of external page contents   
var container = document.querySelector('.container');

var loadWebpage = function (which) {
    which = which.slice(1);
    if (!which) return container.innerHTML = '';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', which + '.html');
    xhr.onload = function () {
        if (xhr.status === 200) container.innerHTML = xhr.responseText;
        else console.log(which + ' page not found!')
    };
    xhr.send()
};

window.onhashchange = function () {
    loadWebpage(location.hash) // When hash changes load that page
};

loadWebpage(location.hash); // When page opens load current hash page

I hope that it helps, Good luck