Note that there are some explanatory texts on larger screens.

plurals
  1. POjavascript go back by #url
    primarykey
    data
    text
    <p>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 <code>goback(-1)</code> won't work. Haven't try <code>document.referrer</code>. 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:</p> <pre><code>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"; } </code></pre> <p>And this is my navigation:</p> <pre><code>&lt;ul id="nav" class="grey,menu"&gt; &lt;li&gt;&lt;a id="Contact" href="#Contact" onclick="showContact()" class="descriptionContact"&gt;Contact&lt;span&gt;Contact description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="Client" href="#Client" onclick="showClient()" class="descriptionClient"&gt;Client&lt;span&gt;Client description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="Projects" href="#Projects" onclick="showProjects()" class="descriptionProjects"&gt;Projects&lt;span&gt;Project description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="Service" href="#Service" onclick="showService()" class="descriptionService"&gt;Service&lt;span&gt;Service description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="About" href="#About" onclick="showAbout()" class="descriptionAbout"&gt;About&lt;span&gt;description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id="Home" href="#Home#" onclick="showHome()" class="descritionHome"&gt;Home&lt;span&gt;Return to main page, all update news are here&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; </code></pre> <p></p> <p>Page:</p> <pre><code>&lt;div class="content" id="content2"&gt;&lt;div id="contenter"&gt;page2&lt;/div&gt;&lt;/div&gt; &lt;div class="content" id="content3"&gt;&lt;div id="contenter"&gt;page3&lt;/div&gt;&lt;/div&gt; &lt;div class="content" id="content4"&gt;&lt;div id="contenter"&gt;page4&lt;/div&gt;&lt;/div&gt; &lt;div class="content" id="content5"&gt;&lt;div id="contenter"&gt;page5&lt;/div&gt;&lt;/div&gt; &lt;div class="content" id="content6"&gt;&lt;div id="contenter"&gt;page6&lt;/div&gt;&lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload