This article provides a quick usage example of my preferred method of creating tabbed interfaces using the widely available ControlTabs extension using the Prototype javascript library. First, you should make sure you download a copy of controltabs from the following site:

http://livepipe.net/control/tabs

Setting up tabs is easy in ControlTabs. The first thing you do is ensure that you call the javascripts in the right order in the head of your html and/or PHP pages.

<html>
<head>
     <title>This is my sample web page</title>
     <script type="text/javascript" src="/js/prototype.js"></script>
     <script type="text/javascript" src="/js/scriptaculous.js"></script>
     <script type="text/javascript" src="/js/controltabs.js"></script>
</head>
</html>

Scriptaculous and controltabs both rely on Prototype, so that's why it must be called first in that order. 

Next, you can create a tab container usign a div. Inside that div, we are going to create an un-ordered list which will contain our tab labels. Create tab container as a DIV as follows:

<div id="tabcontainer">
    <!-- unordered list of tabs will go here -->
</div>

The tab list should be created using an un-ordered list HTML entity:

<ul id="tab_group_1" class="subsection_tabs">
    <li><a href="#tab1">Football</a></li>
    <li><a href="#tab2">Soccer</a></li>
    <li><a href="#tab3">Hockey</a></li>
    <li><a href="#tab4">Basketball</a></li>
</ul>

Ok, we're starting to make progress. Next we need DIVS that will hold ea. tab's content. This too will be wholely contained by the tab container w/ the ID "tabcontainer" shown in step 2. Don't worry, we'll show what the entire tab container looks like fully populated. Next, we'll create the tab div for the tab content.

<div id="tab1" class="tabdata">
    <!-- no content other than indicator, b/c it is loaded with AJAX -->
    <img src="/images/spinner2.gif" alt="running...">
</div>

Remember, we have to make four of these, one for each tab so that it can hold its tab's content. In our case, we need to make a separate div for "tab1", "tab2", "tab3", and "tab4". The last part is that we need to instantiate the Control.Tabs object on our tab_group_1. Here's how:

<script>
new Control.Tabs('tab_group_one', {
    afterChange:function(new_el) {
        new Ajax.Updater(new_el, 'ajax_sports.php', {
            method: 'post',
            parameters: { tab: new_el.id }
        });
    }
});
</script>

NOTE: this also goes inside our tab container. This is what it all looks like when all assembled:

<div id="tabcontainer">
<ul id="tab_group_one" class="subsection_tabs">
    <li><a href="#tab1">Football</a></li>
    <li><a href="#tab2">Soccer</a></li>
    <li><a href="#tab3">Hockey</a></li>
    <li><a href="#tab4">Basketball</a></li>
</ul>
<div id="tab1" class="tabdata">
    <!-- no content other than indicator, b/c it is loaded with AJAX -->
    <img src="/images/spinner.gif" alt="running...">
</div>
<div id="tab2" class="tabdata">
    <!-- no content other than indicator, b/c it is loaded with AJAX -->
    <img src="/images/spinner.gif" alt="running...">
</div>
<div id="tab3" class="tabdata">
    <!-- no content other than indicator, b/c it is loaded with AJAX -->
    <img src="/images/spinner.gif" alt="running...">
</div>
<div id="tab4" class="tabdata">
    <!-- no content other than indicator, b/c it is loaded with AJAX -->
    <img src="/images/spinner.gif" alt="running...">
</div>
<script>
new Control.Tabs('tab_group_one', {
    afterChange:function(new_el) {
        new Ajax.Updater(new_el, 'ajax_sports.php', {
            method: 'post',
           parameters: { tab: new_el.id }
        });
    }
});
</script>
</div>

This article will be continued, as the next part is to talk about how to incorporate the CSS for the proper format and output.