-->
Bookmark and Share

Tabs

See the demo page for the finished version of the code.

Setting the Active Tab

To make a tab active, we just need to add the "activeTab" class name to its link element. Likewise, to deactivate it, we need to remove that class name from the link. This can be done dynamically using JavaScript.

To trigger the change, we'll add some code to the pages being loaded in the inline frames.

Cross-Frame Scripting

For this, an external script file is used. Every page to be loaded in the tabbed frames contains the following line.

<script type="text/javascript" src="tabbed.js"></script>

The "tabbed.js" file contains this code:

if (window.parent && window.parent.synchTab)
  window.parent.synchTab(window.name);

This basically says, "if there is a parent window and the page in that parent contains a JavaScript function named 'synchTab' then call it."

This code will execute anytime the page is loaded. When it calls the function, it passes the frame's name as an argument.

Activating and Deactivating Tabs

The rest of the code is defined in the main page. The synchTab() function first locates the tab link that corresponds to the page that is being loaded in the frame.

function synchTab(frameName) {

  var elList, i;

  // Exit if no frame name was given.

  if (frameName == null)
    return;

  // Check all links.

  elList = document.getElementsByTagName("A");
  for (i = 0; i < elList.length; i++)

    // Check if the link's target matches the frame being loaded.

    if (elList[i].target == frameName) {

      // If the link's URL matches the page being loaded, activate it.
      // Otherwise, make sure the tab is deactivated.

      if (elList[i].href == window.frames[frameName].location.href) {
        elList[i].className += " activeTab";
        elList[i].blur();
      }
      else
        removeName(elList[i], "activeTab");
    }
}

It does this by checking all the link elements in the page, looking only for links who's target matches the name of the frame given.

For each of these, it compares the link's href to the href of page loaded in the frame. If they match, that link is made the active tab. If not, it is deactivated.

Activating a tab link is done by simply appending the "activeTab" class name to the element. Deactivating a tab link can be a little tricky since there may be more than one class name assigned to the element. So a function called removeName() is used.

Dealing with Multiple Class Names

When multiple style classes are set in an element tag via the CLASS attribute, they are reflected in the element object's className property. This value will be a string of names separated by spaces.

function removeName(el, name) {

  var i, curList, newList;

  // Remove the given class name from the element's className property.

  newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList[i] != name)
      newList.push(curList[i]);
  el.className = newList.join(" ");
}

The removeName() function creates an array of names out of this string using the split() method. It can then loop through the array and check each name, adding a name to a new array unless it matches the one to be removed.

This new array is then made into a string value using the array join() method, creating a string of names again separated by spaces. That string value can then be assigned to the element's className property.

Now the display should work as expected. Clicking on any tab will load the corresponding page and that tab will become active.

Likewise, you can use the forward and backward buttons on your browser to move back and forth between the tabbed pages. As each reloads, the proper tab becomes active, keeping the display synchronized.

Conclusion

The demo shows how the code works for two independent tab displays. It also demonstrates some variations on the layout and style settings (including rounded edges for Mozilla/Netscape browsers and colored scroll bars for IE) used in the previous examples.

You might try some variations of your own, such as moving the tabs below the display. Or using different sets of style classes for different displays on the same page.

In all, this sample should demonstrate how versatile CSS can be. Combined with some simple script coding, you'll find it can also provide very dynamic displays.