使用Div Anchor Link隐藏/显示div

Question

I have a page with 4 hidden divs. If I want to link to them, I do this for example

<a href="#about" class="nav_text" id="about_link">About</a>

This shows the about div and hides the others due to my Javascript/jQuery that I wrote for it.

However, my problem arises in that the user's address bar reads as /index.php#about_content. If you were to manually type that in, it doesn't show the about_content div because it's hidden. How can I make it show that div if it's manually typed in?

Answer 1

Read the current hash and show it on document ready.

$(document).ready(function() {
    $(window.location.hash).show();
});

Answer 2

You'll want to listen for a hashchange event on the window. Once you do that, load in the element from the hash, and, if it matches, show the proper <div> . You'll also want to check on initial load of the page if there is something in the hash and do the same.

Not that this is IE8+ compatible only, as IE7 and below do not support the hashchange event. If you want to support them, you'll need to use one of the many tricks (or plugins ) for it.

PS You can find out what is in the hash using location.hash