Team:GeorgiaState
From 2011.igem.org
(Difference between revisions)
Line 2: | Line 2: | ||
- | <html | + | __NOTOC__<html lang="en"> |
- | + | <head> | |
- | + | <script type="text/javascript" | |
- | < | + | src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
- | + | <script type="text/javascript"> | |
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
- | </ | + | |
- | + | $(document).ready(function() { | |
+ | //Default Action | ||
+ | $(".tab_content").hide(); //Hide all content | ||
+ | $("ul.tabs li:first").addClass("active").show(); //Activate first tab | ||
+ | $(".tab_content:first").show(); //Show first tab content | ||
+ | |||
+ | //On Click Event | ||
+ | $("ul.tabs li").click(function() { | ||
+ | $("ul.tabs li").removeClass("active"); //Remove any "active" class | ||
+ | $(this).addClass("active"); //Add "active" class to selected tab | ||
+ | $(".tab_content").hide(); //Hide all tab content | ||
+ | var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content | ||
+ | $(activeTab).fadeIn(); //Fade in the active content | ||
+ | return false; | ||
+ | }); | ||
- | + | }); | |
- | + | </script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | < | + | <style type="text/css"> |
+ | body { | ||
+ | background: #f0f0f0; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font: 10px normal Verdana, Arial, Helvetica, sans-serif; | ||
+ | color: #444; | ||
+ | } | ||
+ | h1 {font-size: 3em; margin: 20px 0;} | ||
+ | .container {width: 500px; margin: 10px auto;} | ||
+ | ul.tabs { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | float: left; | ||
+ | list-style: none; | ||
+ | height: 32px; | ||
+ | border-bottom: 1px solid #999; | ||
+ | border-left: 1px solid #999; | ||
+ | width: 100%; | ||
+ | } | ||
+ | ul.tabs li { | ||
+ | float: left; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | height: 31px; | ||
+ | line-height: 31px; | ||
+ | border: 1px solid #999; | ||
+ | border-left: none; | ||
+ | margin-bottom: -1px; | ||
+ | background: #e0e0e0; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | ul.tabs li a { | ||
+ | text-decoration: none; | ||
+ | color: #000; | ||
+ | display: block; | ||
+ | font-size: 1.2em; | ||
+ | padding: 0 20px; | ||
+ | border: 1px solid #fff; | ||
+ | outline: none; | ||
+ | } | ||
+ | ul.tabs li a:hover { | ||
+ | background: #ccc; | ||
+ | } | ||
+ | html ul.tabs li.active, html ul.tabs li.active a:hover { | ||
+ | background: #fff; | ||
+ | border-bottom: 1px solid #fff; | ||
+ | } | ||
+ | .tab_container { | ||
+ | border: 1px solid #999; | ||
+ | border-top: none; | ||
+ | clear: both; | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background: #fff; | ||
+ | -moz-border-radius-bottomright: 5px; | ||
+ | -khtml-border-radius-bottomright: 5px; | ||
+ | -webkit-border-bottom-right-radius: 5px; | ||
+ | -moz-border-radius-bottomleft: 5px; | ||
+ | -khtml-border-radius-bottomleft: 5px; | ||
+ | -webkit-border-bottom-left-radius: 5px; | ||
+ | } | ||
+ | .tab_content { | ||
+ | padding: 20px; | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | .tab_content h2 { | ||
+ | font-weight: normal; | ||
+ | padding-bottom: 10px; | ||
+ | border-bottom: 1px dashed #ddd; | ||
+ | font-size: 1.8em; | ||
+ | } | ||
+ | .tab_content h3 a{ | ||
+ | color: #254588; | ||
+ | } | ||
+ | .tab_content img { | ||
+ | float: left; | ||
+ | margin: 0 20px 20px 0; | ||
+ | border: 1px solid #ddd; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | </style> | ||
- | + | <body> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <ul class="tabs"> | ||
+ | <li><a href="#tab1">Gallery</a></li> | ||
+ | <li><a href="#tab2">Submit</a></li> | ||
+ | </ul> | ||
+ | <div class="tab_container"> | ||
+ | <div id="tab1" class="tab_content"> | ||
+ | <!--Content--> | ||
+ | </div> | ||
+ | <div id="tab2" class="tab_content"> | ||
+ | <!--Content--> | ||
+ | </div> | ||
+ | </div> | ||
- | + | </body> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 15:35, 6 July 2011