Team:ZJU-China/JS/tabs.js

From 2014.igem.org

Revision as of 17:00, 15 October 2014 by Tzuyu (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

// Wait until the DOM has loaded before querying the document $(document).ready(function () {

   $('ul.tabs').each(function () {
       // 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]);
       $active.addClass('active');
       $content = $($active[0].hash);
       // Hide the remaining content
       $links.not($active).each(function () {
           $(this.hash).hide();
       });
       // Bind the click event handler
       $(this).on('click', 'a', function (e) {
           // Make the old tab inactive.
           $active.removeClass('active');
           $content.hide();
           // Update the variables with the new link and content
           $active = $(this);
           $content = $(this.hash);
           // Make the tab active.
           $active.addClass('active');
           $content.show();
           // Prevent the anchor's default click action
           e.preventDefault();
       });
   });

});