Question

I have a web page that contains two articles. Upon loading this page, jQuery is used to hide the two articles and slide down the first one. User can click on the navigation tab to view the second article. Then go back to the first article by clicking the back button using the onhashchange event. The following is my HTML code:

<nav>
 <a href='#1'>Article 1</a>
 <a href='#2'>Article 2</a>
</nav>

<article id=1>
 The first article.
</article>

<article id=2>
 The second article.
</article>

And here is the javascript code:

function change(hash)
{
 $('article:visible').slideUp();
 if(hash != '')
 {
  $(hash).slideDown();
 }
 else
 {
  $('article').first().slideDown();
 }
}

$('nav a').click(function(){
 var id = $(this).attr('href');
 change(id);
});

$('article').hide();
change(location.hash);
window.onhashchange = change(location.hash);

What was observed is that the page remains on the second article despite clicking the back button. I am using firefox 12.0 browser and don’t know what is causing it not to work. Any help is appreciated. Thanks.

Answer 1

You might want to try:

window.onhashchange = change;

//and read location.hash in the change function instead
function change(){
    var hash = location.hash;
    ...
}

or

window.onhashchange = function(){
    change(location.hash);
}

---

window.onhashchange = change(location.hash);

If my JS ain’t rusty, this fails because

• calls change()
• functions that have no return return undefined
• you are assigning undefined to window.onhashchange – which is wrong because you’re supposed to assign a function to an event.