Return to Answer

You're hardly using jQuery at all here. You can either get rid of jQuery entirely (as in konijn's answer), or you can use it to your advantage. Either way is perfectly acceptable.

You're hardly using jQuery at all here. You can either get rid of jQuery entirely (as in konijn's answer), or you can use it to your advantage. Either way is perfectly acceptable.

You're hardly using jQuery at all here. You can either get rid of jQuery entirely (as in konijn's answer), or you can use it to your advantage.

You're hardly using jQuery at all here. You can either get rid of jQuery entirely (as in konijn's answer), or you can use it to your advantage. Either way is perfectly acceptable.

Note that the href attribute for the links point to a DIV. The nice part is, that this works even if the user doesn't have JavaScript enabled; a #someId link will scroll the page to show the element with that ID.

function initializeTabs(selector) {
 var tabs = $(selector), // get the tab links
 first;
 // helper function to hide a tab's element
 function deselectTab(tab) {
 tab.removeClass("selected").data("pane").hide();
 }
 // helper function to show a tab's element
 function selectTab(tab) {
 tab.addClass("selected").data("pane").show();
 }
 // get the elements that the tabs should show/hide
 tabs.each(function () {
 var tab = $(this),
 paneId = tab.attr("href");
 tab.data("pane", $(paneId));
 });
 tabs.on("click", function (event) {
 var target = $(this);
 // don't follow the links
 event.preventDefault()
 // return if the tab's already selected
 if( target.hasClass("selected") ) { return; }
 // hide the currently selected tab
 deselectTab(tabs.filter(".selected"));
 // show the clicked tab
 selectTab(target);
 });
 // show the first tab
 first = tabs.eq(0);
 selectTab(first);
 // hide the others
 tabs.not(first).each(function () {
 deselectTab($(this));
 });
}
// onload
$(function () {
 initializeTabs("a.tab");
});

Note that the href attribute for the links point to a DIV. The nice part is that this works even if the user doesn't have JavaScript enabled; a #someId link will scroll the page to show the element with that ID. It's not the same as having real tabs, but it's as good a substitute as any.

Point is that if you add more tabs, you only have to change the HTML. The JavaScript will "just work".

function initializeTabs(selector) {
 var tabs = $(selector), // get the tab links
 first;
 // helper function to hide a tab's element
 function deselectTab(tab) {
 tab.removeClass("selected").data("pane").hide();
 }
 // helper function to show a tab's element
 function selectTab(tab) {
 tab.addClass("selected").data("pane").show();
 }
 // get the elements that the tabs should show/hide
 tabs.each(function () {
 var tab = $(this),
 paneId = tab.attr("href");
 tab.data("pane", $(paneId));
 });
 // set up the click-event handling
 tabs.on("click", function (event) {
 var target = $(this);
 // don't follow the links
 event.preventDefault()
 // stop here if the tab's already selected
 if( target.hasClass("selected") ) { return; }
 // hide the currently selected tab
 deselectTab(tabs.filter(".selected"));
 // show the clicked tab
 selectTab(target);
 });
 // show the first tab
 first = tabs.eq(0);
 selectTab(first);
 // hide the others
 tabs.not(first).each(function () {
 deselectTab($(this));
 });
}
// onload
$(function () {
 initializeTabs("a.tab");
});