Team:GeorgiaState

From 2011.igem.org

(Difference between revisions)
 
(16 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:GeorgiaState/Header}}
{{:Team:GeorgiaState/Header}}
-
__NOTOC__<html lang="en">
+
{{:Team:GeorgiaState/templates/tabs/home}}
-
<head>
+
-
<body>
+
{{:Team:GeorgiaState/background}}
-
<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: 760px; 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: #2B60DE;
+
-
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: #4CC417;
+
-
}
+
-
html ul.tabs li.active, html ul.tabs li.active a:hover  {
+
-
background: #59E817;
+
-
border-bottom: 1px solid #59E817;
+
-
}
+
-
.tab_container {
+
-
border: 1px solid #fff;
+
-
border-top: none;
+
-
clear: both;
+
-
float: left;
+
-
width: 100%;
+
-
background: #59E817;
+
-
-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: #2B60DE;
+
-
}
+
-
.tab_content img {
+
-
float: left;
+
-
margin: 0 20px 20px 0;
+
-
border: 1px solid #fff;
+
-
padding: 5px;
+
-
}
+
-
</style>
+
-
 
+
-
 
+
-
 
+
-
<ul class="tabs">
+
-
    <li><a href="#tab1">Introduction</a></li>
+
-
    <li><a href="#tab2">More Information</a></li>
+
-
    <li><a href="#tab3">Who We Are</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>
+

Latest revision as of 19:00, 14 July 2011

Tabbed content

 
Home