The idea is to take an url like "aine.su/?page=test" get parameter "page" as a filename and then load the contents of the file into div. Everything is simple, but a little bit tricky (a relic of the time of WAP sites without a server language)
My weird idea requares a jQuery (place it in
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Then we need to get our "filename" parameter from url
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var pageID = getUrlVars()["page"];
Now we have a "filename" and we can load it (better place it )
if(pageID == null) {
$('#content').load('//yourwebsite.com/pages/main.html'); //if pageID is null (empty)
}
$('#nav-link').click(function(){
$(function() {
$(window).bind('hashchange', function() {
var pageID = getUrlVars()["id"];
console.log(pageID);
$('#content').load('//yourwebsite.com/pages/'+pageID+'.html');
}).trigger('hashchange');
});
});
Don't forget about this :)
<a href="/?page=test">Test</a>