Passing values from URL

Hello I have site where I show/hide divisions that are loaded by default at start. But the problem is that when I refresh 开发者_如何转开发page it is always going back to main division. Is there any way I can do something like mysite/#news mysite/#about?

Code that I have:

        $('a#btnNews').click(function()
        {
            $('#divabout').hide();
            $('#divnews').fadeIn();
            $('#pagetimer').load('scripts/loadtimer.php');
            return false;
        });

        $('a#btnAbout').click(function()
        {
            $('#divrooster').hide();
            $('#divabout').fadeIn();
            $('#pagetimer').load('scripts/loadtimer.php');
            return false;
        });

Throughout this you can use window.location.hash instead.

if (location.hash != "") {
  $('a#'+location.hash).click();
}
$('a#btnNews').click(function()
{
  $('#divabout').hide();
  location.hash = 'btnNews';
  $('#divnews').fadeIn();
  $('#pagetimer').load('scripts/loadtimer.php');
  return false;
});
$('a#btnAbout').click(function()
{
  $('#divrooster').hide();
  location.hash = 'btnAbout';
  $('#divabout').fadeIn();
  $('#pagetimer').load('scripts/loadtimer.php');
  return false;
});

Make sure to put all this inside either $(function(){}); or $(document).ready(function(){});!

You can either use $('a#'+location.hash).click(); or you can change the hash to fade in the targeted div directly.

You can also use e.preventDefault() instead of return false;. (It also works better) E.g.

$('a#btnNews').click(function(e) {
e.preventDefault();
...
});

Not exactly like you have there, but you can save the state of the page by updating the hash.

There's and advanced plugin that will handle this for you, or you can roll your own.

The Plugin: http://benalman.com/projects/jquery-bbq-plugin/

Roll Your Own: http://jsbin.com/oyeqe3/3#List2

On the roll your own example you can see the #List2 is being passed as a hash. It'll keep the 2nd list shown and the others hidden.

Code sample from the link above:

HTML:

<a href="#List1" class="trigger">Show 1</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="#List2" class="trigger">Show 2</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<a href="#List3" class="trigger">Show 3</a> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; 

<ul id="List1">
    <li>One</li>
</ul>
<ul id="List2">
    <li>Two</li>
</ul>
<ul id="List3">
    <li>Three</li>
</ul>  

jQuery

// when the trigger is clicked
$('a.trigger').click(function(){

  // hide all lists
  $('ul').hide();

  // show the correct ul (based on the hash of the clicked link)
  $('ul'+this.hash).show();

  // update the hash
  window.location.hash = this.hash;

});

// when the page loads and there is a hash
if( window.location.hash ){

  // could do a bunch of different things here, we'll click the link w/ the corresponding hash
  $('a.trigger[href='+window.location.hash+']').trigger('click');

};

Not a beautiful implementation but you get the idea hopefully.