Проблема с вкладками на jquery

[tomclancys]

Проблема следующего характера.
Есть html страница в ней есть блок вкладок на jquery. После клика по любой вкладке и обновлении страницы сбрасывается выделеная вкладка, а нужно чтобы сохранялась...

Не могу понять в чём проблема.

Код вкладок:

<div id="wrapper">
<ul class="tabs2"> 
<li><a href="#">1 вкладка</a></li> 
<li><a href="#">2 вкладка</a></li> 
<li><div title="Текст" onclick="location.href='1.html';"><a href="1.html">3 вкладка</a></div></li> 
<li><div title="Текст" onclick="location.href='4.html';"><a href="4.html">4 вкладка</a></div></li> 
<li><div title="Текст" onclick="location.href='5.html';"><a href="5.html">5 вкладка</a></div></li> 
</ul>  
<div class="panes2"> 
<div id="text-navi">1 вкладка</div> 
<div id="text-navi">2 вкладка</div> 
<div id="text-navi">3 вкладка</div> 
<div id="text-navi"><table width="100%"  border="0" cellspacing="0" cellpadding="0" class="text-navi4">
<tr>
<td><span class="text-navi4">4 вкладка</td>
</tr>
</table></div> 
<div id="text-navi">5 вкладка</div></div>
<script> 
$(function() {
$("ul.tabs2").tabs("div.panes2 > div");
});
</script>

Стиль вкладок:

a:active {
  outline:none;
}

:focus {
-moz-outline-style:none;

}


div.panes2 div {
font-family:verdana, sans-serif;color:#333;font-size:12px;
display:none;        
width: 726px;
border-top:0;
height:44px;
font-size:14px;
background: url(../images/bg2.jpg);
border-left: 1px solid #BCC2CE;
}



/* root element for tabs  */

ul.tabs2 { 

font-family:verdana, sans-serif;color:#333;font-size:12px;
list-style:none; 
margin:0 !important; 
padding:0;
height:44px;
line-height:44px;
width: 726px;
background: url(../images/bg5.jpg);    

}



/* single tab */

ul.tabs2 li { 

font-family:verdana, sans-serif;color:#333;font-size:12px;

    float:left;     

    text-indent:0;

    padding:0;

    margin:0 !important;

    list-style-image:none !important; 

}


/* link inside the tab. uses a background image */

ul.tabs2 a { 
    

    font-family:verdana, sans-serif;color:#333;font-size:16px;

    display:block;

    height: 44px;  

    line-height:44px;

    width: 144px;

    text-align:center;    

    text-decoration:none;

    color:#FFFFFF;

    padding:0px;

    margin:0px;    

    position:relative;

    top:0px;

}


ul.tabs2 a:active {

    outline:none;        

}


/* when mouse enters the tab move the background image */

ul.tabs2 a:hover {

background: url(../images/tabs3.png) no-repeat -619px 0;    

    color:#333333;    

}


/* active tab uses a class name "current". it's highlight is also done by moving the background image. */

ul.tabs2 a.current, ul.tabs2 a.current:hover, ul.tabs2 li.current a {

    background: url(../images/tabs3.png) no-repeat -619px 0;        

    cursor:default !important; 

    color:#000000 !important;

}


/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */

ul.tabs a.w1             { background-position: -519px 0; width:134px; }

ul.tabs a.w1:hover     { background-position: -519px -31px; }

ul.tabs a.w1.current { background-position: -519px -62px; }


/* width 2 */

ul.tabs a.w2             { background-position: -366px -0px; width:154px; }

ul.tabs a.w2:hover     { background-position: -366px -31px; }

ul.tabs a.w2.current { background-position: -366px -62px; }


/* width 3 */

ul.tabs a.w3             { background-position: -193px -0px; width:174px; }

ul.tabs a.w3:hover     { background-position: -193px -31px; }

ul.tabs a.w3.current { background-position: -193px -62px; }


/* width 4 */

ul.tabs a.w4             { background-position: -0px -0px; width:194px; }

ul.tabs a.w4:hover     { background-position: -0px -31px; }

ul.tabs a.w4.current { background-position: -0px -62px; }


/* initially all panes are hidden */ 

div.panes2 div.pane2 {

    display:none;        

}

Помогите решить проблему. Очень нужно =(