i put 4 level tabs content in div using DD ajax content tabs plugin v2.0. before my page loading is complete, i see all 4 level tabs in reed and Cluttered Vertical list.( in fact user see 4 tabs content in one tabs) and when my page loading completed (100%) tabs worked and hidden 3 of 4 tabs and i see my defualt tabs. this not beautiful! In the first visit user see bad layout. a way for this problem? thanks
JS :
<script type="text/javascript">
var myflowers=new ddtabcontent("searchtabs") //enter ID of Tab Container
myflowers.setpersist(false) //toogle persistence of the tabs' state
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
CSS :
#tabsdex {
float:left;
width:100%;
line-height:normal;
margin-bottom:1em;
overflow:hidden; margin:8px 16px 0 0;
}
#tabsdex ul {
margin:0;
padding:0 0 0 0;
list-style:none;
}
#tabsdex li {
display:inline; line-height:17px;
margin:0;
padding:0;
}
#tabsdex a {
float:right;
margin:0;
padding:0;
text-decoration:none;
}
#tabsdex a span {
float:right;
display:inline-block; width:60px;
background:url(../images/main.png); background-position: -452px -279px;
padding:3px 6px 9px 4px;text-align:center;
margin-right:6px;
color:#56596c;
}
#tabsdex a span {float:none;}
#tabsdex a:hover span {color: #fff;
}
#tabsdex a:hover span {
background-position: -452px -309px;
}
#tabsdex a.selected span{
background-position: -452px -309px;
color: #fff; /* Edit For Hover*/
}
HTML:
<div id="tabsdex">
<ul id="searchtabs">
<li><a href="#" rel="div1" class="selected" ><span>test1</span></a></li>
<li><a href="#" rel="div2"><span>test2</span></a></li>
<li><a href="#" rel="div3"><span>test3</span></a></li>
<li><a href="#" rel="div4"><span>test4</span></a></li>
</ul>
<div>
<div id="searchtabsdiv1"></div>
<div id="searchtabsdiv2"></div>
<div id="searchtabsdiv3"></div>
<div id="searchtabsdiv4"></div>