Go to url then hide/show div

Go to url then hide/show div

Dears,



HTML code is:

  1.     <a class="first-l">First</a>
  2.     <a class="second-l">Second</a>
  3.     <a class="third-l">Third</a>
  4.     <a class="redirect">redirect to second</a>
  5. <div id="main">
  6.            <div class="first">
  7.             <h1>First</h1>
  8.                    <p>Test-1</p>
  9.               </div>
  10.               <div style="display:none;" class="second">
  11.             <h1>Second</h1>
  12.                    <p>Test-2</p>
  13.               </div>
  14.               <div style="display:none;" class="third">
  15.             <h1>Third</h1>
  16.                    <p>Test-3</p>
  17.               </div>
  18.     </div>



jQuery code is:

  1. $(document).ready(function() {
  2.   
  3.    $('a.first-l').click (function () {
  4. $('.first').fadeIn();
  5. $('.second').fadeOut();
  6. $('.third').fadeOut();
  7. });
  8. $('a.second-l').click (function () {
  9. $('.first').fadeOut();
  10. $('.third').fadeOut();
  11. $('.second').css("display", "block" ).fadeIn();
  12. });
  13. $('a.third-l').click (function () {
  14. $('.first').fadeOut();
  15. $('.second').fadeOut();
  16. $('.third').css("display", "block" ).fadeIn();
  17. });
  18.   
  19. });




All I want to do now is:

1- When I click the link "redirect to second", it goes to the above html page then hide the divs "first and third" and just show the div "second".

2- Also, if I have the link "redirect to second" on an out-source page, I want it to do the same (go to the above html page then hide the divs "first and third" and just show the div "second").



Help will be appreciated.
Thanks.