yes you guessed it, this also uses images from the horizontal css menu builder, actually it uses the exact same images as the earlier example that used MooTools as the javascript library. That’s the definition of laziness for you!

If you are using the MooTools version or read that post or have not had problems in browsers with that version or are never going to use these javascript tab menus, then there is really no point in reading the rest of this post. On the other hand, if you love reading about this stuff, please be my guest and read the rest of the post.

I did this version of my tabbed content script only because there was a comment on the previous version, saying that it did not work in IE7. It did work in my IE7, but for some reason, it did not work in some other IE7’s and after rewriting the MooTools version, it still did not work in that website when viewed by some IE7’s.

So, I thought it might be a good idea to try and provide an alternative to the MooTools version and for no particular reason, jQuery was the choice . I actually also considered using Dojo, but due to the lack of quality documentation, I changed my opinion, so if any of the few people reading this blog are firm in Dojo and have nothing better to do, you are more than welcome to add a comment with a link to your tab tutorial.

Well enough pre-talk, lets get to it.

I was supprised how short the code became, though I am sure it would also be possible to shorten the MooTools code. The jQuery version of the tabbed content script is only 13 lines of code, but it could be even shorter, if you moved the function code inside the document ready container. I chose not to do this, as I like having the functions, to get a better overview of the various sections of javascript code.

Here is the javascript code

$(document).ready(function(){
initTabs();
});

function initTabs() {
$('#tabMenu a').bind('click',function(e) {
e.preventDefault();
var thref = $(this).attr("href").replace(/#/, '');
$('#tabMenu a').removeClass('active');
$(this).addClass('active');
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
});
}

And to see what it actually does, here are the links to the examples.

jQuery tabs at the top of the container

jQuery tabs at the bottom of the container

Note
By the way, if you started out with the MooTools version, but now want to use the jQuery version, all you have to do is change the javascript, since the rest is the same.

And another note
This version will not break if javascript is disabled, though you would have to create the pages with the tabs open, in accordance to the URL you put in the href attribute. An example could be using a server-side rewrite and then capturing the last part of the URL and with this information activate the tab, by adding “active” the the class of the DIV element.

Third and final note
Though I wrote the tabbed content script for two different javascript libraries, I do not expect to do this in the future. I usually use MooTools and am quite happy doing so. It takes time to learn how to use a new library and then you might mix them and break the code you are trying to write, or at least I might do this. Furthermore I believe it is a good idea to learn one and learn it well, than learning them all, but badly. This does not mean that MooTools is the best in the world, but I guess it is the one I have come to like.