jQuery Tabbed Menu

Rather than having one long page of content, it often it makes sense to gather the content into sections that are only shown when a tab is clicked. There are various ways to do this—with both JavaScript or CSS.

jQuery Method

With a small amount of jQuery, this can be done very easily:

$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("current").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("current");
  $(this).addClass("current");
  $(".tab_content").hide();
  var activeTab = $(this).find("a").attr("href");
  $(activeTab).fadeIn();
  return false;
});
});

With CSS, you can also organize the tabs in different ways—for example, as a horizontal tab menu above the content, or as a vertical menu to one site. Here are two simple examples of the above:

Horizontal menu above content

Vertical menu beside content

The only difference in the those layouts is in the CSS. The jQuery code is the same. Simply view the source code of each example to get the full code.

With CSS Alone

CSS3 provides the :target pseudo class, which can also be used to create tabbed content (although it is not supported in older browsers). Here is a really basic example:

Tabs with CSS3

Here are some more examples of how it can be done: