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.