| tomclancys |
11.03.2010 08:44 |
Проблема с вкладками на jquery
Проблема следующего характера.
Есть 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;
}
Помогите решить проблему. Очень нужно =( |