jQuery Tabs Tutorial

Tabs are easy to implement and can be built to work with your existing markup. This guide will walk through the process.

    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = $(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {

    // Bind the click event handler
    $(this).on('click', 'a', function(e){
      // Make the old tab inactive.

      // Update the variables with the new link and content
      $active = $(this);
      $content = $(this.hash);

      // Make the tab active.

      // Prevent the anchor's default click action

jQuery Tabs Tutorial.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>