Team:Hong Kong HKUST/astrid

From 2014.igem.org

Revision as of 13:34, 23 September 2014 by Astridsephira (Talk | contribs)

.tabs a{ 

 cursor: pointer;
 padding: 5px;
 background: #fff;
 color: #000;
 border: 1px solid #666;
 border-bottom: 0;

} .tabs a:hover, .tabs a.active{ 

 background: #666;
 color: #fff;

}

.tabContent{ 

 border: 1px solid #aaa;
 margin: 4px 0;
 padding: 5px;

}

(function($){ 
 $.fn.html5jTabs = function(options){
   return this.each(function(index, value){
     var obj = $(this),
     objFirst = obj.eq(index),
     objNotFirst = obj.not(objFirst);
     
     $("#" +  objNotFirst.attr("data-toggle")).hide();
     $(this).eq(index).addClass("active");
     
     obj.click(function(evt){
       
       toggler = "#" + obj.attr("data-toggle");
       togglerRest = $(toggler).parent().find("div");
       
       togglerRest.hide().removeClass("active");
       $(toggler).show().addClass("active");
       
       $(this).parent("div").find("a").removeClass("active");

$(this).addClass("active"); 

       return false;
     });
   });
 };

}(jQuery));

$(function() { 

 $(".tabs a").html5jTabs();

});

<!DOCTYPE html> HTML5 jQuery Tabs

Tab1 Tab2 Tab3 Tab4 Tab5
Tab1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget sollicitudin nibh. Duis semper, diam sed iaculis dictum, libero erat molestie dui, ac suscipit felis leo sed ipsum.

Tab2

Donec pellentesque sapien neque, ac lobortis erat facilisis quis. Praesent faucibus arcu eros. Proin id tortor euismod, vulputate neque id, placerat nunc.

Tab3

Duis justo mi, egestas euismod placerat a, eleifend vitae lacus. Integer non odio nec libero lacinia vulputate. Phasellus ante lectus, congue vel volutpat vitae, dictum quis est.

Tab4

Nulla varius sit amet augue vel consequat. Aenean faucibus vehicula interdum. Integer eleifend, lectus eget vulputate feugiat, nibh nulla congue ipsum, eu mattis tortor nulla vitae diam. Maecenas rutrum risus non libero ullamcorper, nec vehicula sapien tincidunt.

Tab5

Suspendisse vulputate ornare dui, sed luctus est mattis nec. Curabitur ut dolor eleifend, vulputate purus et, ullamcorper tortor. In posuere ultricies lectus. Vestibulum vitae odio ut est sagittis porta.

Retrieved from "http://2014.igem.org/Team:Hong_Kong_HKUST/astrid"