jQuery Tabs

jquery.tabs.js

$(document).ready(function(){
  // Take care of the initial page load
  $(".tabs-menu li:first, .tabs-content:first").addClass("active");
  $(".tabs-content:not(:first)").hide();

  // Capture clicks on the tabs menu. Set the clicked menu item
  // to active. Show the corresponding
  // content block (by index) and hide all others.
  $(".tabs-menu > li > a").click(function(e){
    var index = $('.tabs-menu li').index($(this).parent('li'));

    $('.tabs-menu li.active, .tabs-content.active').removeClass('active');
    $(this).parent('li').addClass('active');
    $('.tabs-content').hide();
    $('.tabs-content').eq(index).show();

    return false;
  });
});

tabs.html.haml

%ul.tabs-menu
  %li
    %a{:href=>"javascript:void(0)"} First
  %li
    %a{:href=>"javascript:void(0)"} Second
  %li
    %a{:href=>"javascript:void(0)"} Third
.tabs-content
  First content...
.tabs-content
  Second content...
.tabs-content
  Third content...

simple and easy to use. thank you.