2 level Javascript tabs - www.pagecolumn.com

In our last topic, we introduced how to make 2 level CSS tabs. There's a drawback of pure CSS 2 level tabs. You cannot watch the 2nd level tabs of other pages. And you have to designate the active page in HTML files of each page by assigning a class name. So we decide to have a trial to use Javascript to solve the problems.

The first we considered is to develop a script on the basis of 2 level CSS tabs using float <li> + block <a> technique, which we have discussed in the last topic. The HTML code looks elegant. The 2nd level tabs also use <ul> and <li> elements, which are just the childNodes of the 1st level <li> elements. We use {display:block} and {display:none} to show and hide the sub-level tabs. The tabs passed every brower but failed in IE6. So this work is for nothing. We need another solution.

In fact, we have already the solution on tabs on the top side of the content box. If we put 2nd level tabs in the content boxes - sub-level <ul> and <li> in the <div> elements , it should be able to render the effect what we want. Here is the result.

The HTML code looks OK except the 2nd level <ul> and <li> elements have to be put in the content divs. And the sequence of the content boxes must match the 1st level tabs - 1st level <ul> and <li> elements. However, we could see apparent advantages.

Only one wrapper id is used. It's easy to apply it to the current codes.
The javascript is similar to that of the content tabs. Suppose the page has both 2 level tabs and content tabs. Both tabs could share the same script.
To designate the active page is easy. Just use one of script.
Tab 4 has no sub-tabs. So it diaplay the default tabs.

Bindtabs("tabco1",2,"mouseover","t") sets the active page is tab3.

Bindtabs("tabco2",1,"mouseover","t") sets the behavior of the content box on the same page.

tab 1
tab 2
tab 3
tab 4

Content box 1

Content box 2

Content box 3

Content box 4

     <div id="tabco1">
        <ul>
            <li ><a href="#">tab 1</a></li>
            <li ><a href="#">tab 2</a></li>
            <li ><a href="#">tab 3</a></li>
            <li ><a href="#">tab 4</a></li>
        </ul>
        <div><ul>
            <li><a href="#">tab11</a></li>
            <li><a href="#">tab12</a></li>
            <li><a href="#">tab13</a></li>
            <li><a href="#">tab14</a></li>
            <li><a href="#">tab15</a></li>
            <li><a href="#">tab16</a></li>
        </ul></div>
        <div ><ul>
            <li><a href="#">tab21</a></li>
            <li><a href="#">tab22</a></li>
            <li><a href="#">tab23</a></li>
            <li><a href="#">tab24</a></li>
            <li><a href="#">tab25</a></li>
            <li><a href="#">tab26</a></li>
        </ul></div>
        <div><ul>
            <li><a href="#">tab31</a></li>
            <li><a href="#">tab32</a></li>
            <li><a href="#">tab33</a></li>
            <li><a href="#">tab34</a></li>
            <li><a href="#">tab35</a></li>
            <li><a href="#">tab36</a></li>
        </ul></div>
        <div></div>
    </div>

Social Bookmark if the page is useful.