javascript go back by #url

Question

im testing a method that include simple javascript to switch different contents instead of linking to other pages. However the problem is if i do this, the browser actually renders all "pages" but only show part content of it. therefore its no history but only different url followed by. I tried use goback(-1) won't work. Haven't try document.referrer . So the question is there a way that can store history and add it to browser? I checked the history is read-only, but i can make go back button in the html only if i can store history on it. here is the javascript part:

function showHome(){
document.getElementById('content1').style.visibility="visible";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showAbout(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="visible";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showService(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="visible";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showProjects(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="visible";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="hidden";
}
function showClient(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="visible";
document.getElementById('content6').style.visibility="hidden";
}
function showContact(){
document.getElementById('content1').style.visibility="hidden";
document.getElementById('content2').style.visibility="hidden";
document.getElementById('content3').style.visibility="hidden";
document.getElementById('content4').style.visibility="hidden";
document.getElementById('content5').style.visibility="hidden";
document.getElementById('content6').style.visibility="visible";
}

And this is my navigation:

<ul id="nav" class="grey,menu">
<li><a id="Contact" href="#Contact" onclick="showContact()" class="descriptionContact">Contact<span>Contact description</span></a></li>
<li><a id="Client" href="#Client" onclick="showClient()" class="descriptionClient">Client<span>Client description</span></a></li>
<li><a id="Projects" href="#Projects" onclick="showProjects()" class="descriptionProjects">Projects<span>Project description</span></a></li>
<li><a id="Service" href="#Service" onclick="showService()" class="descriptionService">Service<span>Service description</span></a></li>
<li><a id="About" href="#About" onclick="showAbout()" class="descriptionAbout">About<span>description</span></a></li>
<li><a id="Home" href="#Home#" onclick="showHome()" class="descritionHome">Home<span>Return to main page, all update news are here</span></a></li>

Page:

<div class="content" id="content2"><div id="contenter">page2</div></div>
<div class="content" id="content3"><div id="contenter">page3</div></div>
<div class="content" id="content4"><div id="contenter">page4</div></div>
<div class="content" id="content5"><div id="contenter">page5</div></div>
<div class="content" id="content6"><div id="contenter">page6</div></div>

Answer 1

To go a bit into the details of the comments:

1. A History-Array:

   var history_array = [];
   function show(idx) {
   hide();
   content[idx].style.visibility = 'visible';
   historyArray[] = idx;
   }

You can then call show(historyArray[historyArray.length-1]); on a Go-back-button. You will also want to remove the last index of the array using historyArray.splice(historyArray.length-1, 1); .

Your script on the Go-back-button thus should look like this: Go Back You may want to decide on a maximum-size of the history and splice the first element of the array if it's reached, but that's up to you.

1. Explaining elclanrs code, as I already used it in above example as well:

First off, he puts every element of the class "content" into the array "content". He calls show() with an identifier for each of your pages. Within show() he first calls hide(). hide() iterates over every element of the class "content" and sets the visibility of those to "hidden". Afterwards show() uses the identifier (int) as index of the array "content" and sets that very element to "visible".

It's somewhat like: "Hide everything and show me the n-th element that I just clicked"

Edit: As the follow-up is too long for a mere comment:

At the top of your script-tag add the following function:

 onload=function(){ if (document.getElementsByClassName == undefined) { document.getElementsByClassName = function(className) { var hasClassName = new RegExp("(?:^|\\\\s)" + className + "(?:$|\\\\s)"); var allElements = document.getElementsByTagName("*"); var results = []; var element; for (var i = 0; (element = allElements[i]) != null; i++) { var elementClass = element.className; if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass)) results.push(element); } return results; } } show(0); 

}

Then replace: var content = document.querySelectorAll('.content');

With: var content = document.getElementsByClassName('content');

Afterwards remove the onload-event from the -tag.

It still throws an initial error that content[idx] is undefined, but it works and I can't get rid of that one on the spot, first priority was to provide a functional fix - the error is probably caused by the loading-order.