Team:ZJU-China/JS/tabs.js

From 2014.igem.org

Latest revision as of 19:07, 17 October 2014

// 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'),
           $nav = $(this),
           $pan = $('div.pan').filter('[href="#' + $(this).attr('id') + '"]');

       // 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();
       });
       if ($pan !== undefined) {
           $pan.on('click', 'img.pan', function (e) {
               // Make the old tab inactive.
               var $pick = $nav.find('a').filter('[href="' + $(this).attr("href") + '"]');
               //console.log("this",$(this).attr("href"), $nav, $pick);
               $active.removeClass('active');
               $content.hide();

               // Update the variables with the new link and content
               $active = $pick;

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

               // Make the tab active.
               $active.addClass('active');
               $content.show();

               // Prevent the anchor's default click action
               e.preventDefault();
           });
       }
   });
   /*$('div.pan').each(function () {
       var $nav = $($(this).attr('href'));
       var $active, $content, $links = $nav.find('a');

       $(this).on('click', 'img', function (e) {
           // Make the old tab inactive.
           $active
           $active.removeClass('active');
           $content.hide();
           var $pick = $nav.find($(this).attr("href"))[0];
           //console.log($active);
           console.log($(this));
           // Update the variables with the new link and content
           $active = $pick;
           $content = $pick.hash;

           // Make the tab active.
           $active.addClass('active');
           $content.show();

           // Prevent the anchor's default click action
           e.preventDefault();
       });
   });*/

});