I’ve given much thought to the wonders of tabbed navigation in website design, but today I ran across a wonderful example that is brilliant in it’s simplicity.

What I’m trying to accomplish is a row of tabs, but the current selected one being a different color. There are all kinds of ways to accomplish this, but here is one developer’s beautiful solution for static pages. Just wrap each page in a different div. Example being, homepage has <div id=”home”>, the Help page has <div id=”help”> and so forth. On the links that make up the navigation, assign each link a class, such as “navigation-link”. Then in the stylesheet, just add something such as

#home .navigation-link, #help .navigation-link { //stuff to make it stand out }

That works wonders. However, in my case, I’m trying to accomplish the same thing on dynamic pages, created through a WordPress theme. I have a dirty solution written in Javascript, but I’m going to work on writing it in PHP if at all possible so that it doesn’t have that momentary lag that the page has right now. You can preview the work at http://www.macfanatic.net/testing/

Javascript Code for changing the class of a link to reflect it’s currently selected:

window.addEvent(’domready’, function() {
var a_list = $$(’#nav li a’); // Array of nav link elements
var i = 0;
while ( i < a_list.length ) {
if ( (window.location.pathname).search(a_list[i].getProperty(’href’)) != -1 ){
//alert(”Match found at location ” + i +” with name ” + a_list[i]);
a_list[i].addClass(’current’);
}
i++;
}
});

Also note that this uses the MooTools library, which you can download here.