JQuery Tabs cannot remember last position after a refresh

JQuery Tabs cannot remember last position after a refresh

Hi,
 
I'm new to this Forum and I hope I do not post my question into the wrong Forum section. I build JQuery Tabs by using "jquery-1.3.2.min.js". Now, everytime when my browser do a refresh it takes me back to the default Tab. But I want to stay on the current Tab. How can I add a JQuery Plugin which remembers my last session.
 
I use the following code:
 
  1. <html>
    <head>
    <!-- JQUERY TAB SCRIPT -->
    <script type="text/javascript">
    if(typeof jQuery=="undefined"){
     var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
     document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
    }
    </script>







  2. <script type="text/javascript">
    $(function () {
     var tabContainers = $('div#tabs > .tabbedWindow');
     tabContainers.hide().filter('#tab-1').show();
               
    $('div#tabs ul.tabNavigation a').click(function () {
     tabContainers.hide();
     tabContainers.filter(this.hash).show();
     $('div#tabs ul.tabNavigation a').removeClass('selected');
     $(this).addClass('selected');
      return false;
     }).filter('#tab-1').click();
    });
    </script>












  3. <!-- CSS -->
    <style>
    #tabs ul.tabNavigation{
        margin: 0;
        padding: 0;
        list-style: none;
        height: 20px;
        position: relative;
        top: 1px;
        border-bottom: #998b7d 1px solid;
    }
    #tabs ul.tabNavigation li{
        float: left;
        padding: 0;
        margin: 0 5px 0 0;
        background: none;
    }
    #tabs ul.tabNavigation a{
        background-color: #fff;
        border: 1px solid #bbb;
        display: block;
        padding: 4px 0 1px;
        text-decoration:none
    }
    #tabs ul.tabNavigation a.selected{
        font-weight: bolder;
        background-color: #546523;
        border-bottom: #bbb 1px solid;
    }
    #tabs ul.tabNavigation a span{
        padding: 0 10px;
    }
    #tabs div.tabbedWindow{































  4.     background-color: #fff;
  5. }
    #tabs ul.tabNavigation a:hover{
        background-color: #F0F0F0 ;
    }



  6. </style>
    </head>
    <body>
    <!-- Tabs -->
    <div id="tabs" class="tabnavigation">
         <ul class="tabNavigation">





  7. <li><a href="#tab-1"class="selected"><span>Default</span></a></li>
    <li><a href="#tab-2" ><span>Tab1</span></a></li>
    <li><a href="#tab-3" ><span>Tab2</span></a></li>
    <li><a href="#tab-4" ><span>Tab3</span></a></li>
    <li><a href="#tab-5" ><span>Tab4</span></a></li>
    <li><a href="#tab-6" ><span>Tab5</span></a></li>
    <li><a href="#tab-7" ><span>Tab6</span></a></li>
    <li><a href="#tab-8" ><span>Tab7</span></a></li>






  8.      </ul>
    <div style="clear: both"></div>
    </div>

  9. <!-- Content Tabs -->
        <div id="tabs" class="tabcontent">
         <div class="tabbedWindow" id="tab-1">
                Default Tab
            </div>
           <div id="tabs" class="tabcontent">
         <div class="tabbedWindow" id="tab-2">
                Tab 1
            </div>
        <div id="tabs" class="tabcontent">
         <div class="tabbedWindow" id="tab-3">
                Tab 2
            </div>











  10. </body>
    </html>

     
Sry for my bad english. I hope someone can help me. Thx