Tabs example code

tabs.js

function tabbedMenu() {
  $('ul#user-page-header-tabs li').click(function() {
    var tabid = $(this).attr('data-tab');

    $('ul#user-page-header-tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $('.tc-' + tabid).addClass('current');
  });
}

var ready = function() {
  tabbedMenu();
};

$(document).ready(ready);

user-page.html.erb

<ul id="user-page-header-tabs">
  <li data-tab="tab-1" class="user-page-header-tab current"><%= t(".uploads") %>
  <li data-tab="tab-2" class="user-page-header-tab"><%= t(".creations") %>
  <li data-tab="tab-3" class="user-page-header-tab"><%= t(".collections") %>
</ul>

<div id="user-uploads-container" class="tab-content tc-tab-1 current">
  <!-- Content goes here -->
</div>

<div id="user-creations-container" class="tab-content tc-tab-2">
  <!-- Content goes here -->
</div>

<div id="user-collections-container" class="tab-content tc-tab-3">
  <!-- Content goes here -->
</div>