drive dynamic content tabs V2. 0 not ordered when the page layout

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>
This entry was posted in Codes & Scripts and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>