Team:UNIK Copenhagen/Signe tabs

From 2013.igem.org

(Difference between revisions)
(Blanked the page)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
 
-
<head>
 
-
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 
-
<title>Untitled 1</title>
 
-
 
-
<style type="text/css">
 
-
#tabs ul {
 
-
padding: 0px;
 
-
margin: 0px;
 
-
margin-left: 10px;
 
-
list-style-type: none;
 
-
}
 
-
 
-
#tabs ul li {
 
-
display: inline-block;
 
-
clear: none;
 
-
float: left;
 
-
height: 24px;
 
-
}
 
-
 
-
#tabs ul li a {
 
-
position: relative;
 
-
margin-top: 16px;
 
-
display: block;
 
-
margin-left: 6px;
 
-
line-height: 24px;
 
-
padding-left: 10px;
 
-
background: #f6f6f6;
 
-
z-index: 9999;
 
-
border: 1px solid #ccc;
 
-
border-bottom: 0px;
 
-
-moz-border-radius-topleft: 4px;
 
-
border-top-left-radius: 4px;
 
-
-moz-border-radius-topright: 4px;
 
-
border-top-right-radius: 4px;
 
-
width: 130px;
 
-
color: #000000;
 
-
text-decoration: none;
 
-
font-weight: bold;
 
-
}
 
-
 
-
#tabs ul li a:hover {
 
-
text-decoration: underline;
 
-
}
 
-
 
-
#tabs #Content_Area {
 
-
padding: 0 15px;
 
-
clear:both;
 
-
overflow:hidden;
 
-
line-height:19px;
 
-
position: relative;
 
-
top: 20px;
 
-
z-index: 5;
 
-
height: 150px;
 
-
overflow: hidden;
 
-
}
 
-
 
-
p { padding-left: 15px; }
 
-
</style>
 
-
 
-
<script type="text/javascript">
 
-
function tab(tab) {
 
-
document.getElementById('tab1').style.display = 'none';
 
-
document.getElementById('tab2').style.display = 'none';
 
-
document.getElementById('li_tab1').setAttribute("class", "");
 
-
document.getElementById('li_tab2').setAttribute("class", "");
 
-
document.getElementById(tab).style.display = 'block';
 
-
document.getElementById('li_'+tab).setAttribute("class", "active");
 
-
}
 
-
</script>
 
-
 
-
</head>
 
-
 
-
<body>
 
-
 
-
<div id="tabs">
 
-
<ul>
 
-
<li id="li_tab1" onclick="tab('tab1')"><a>Tab 1</a></li>
 
-
<li id="li_tab2" onclick="tab('tab2')"><a>Tab 2</a></li>
 
-
</ul>
 
-
<div id="Content_Area">
 
-
<div id="tab1">
 
-
<p>This is the text for tab 1</p>
 
-
</div>
 
-
 
-
<div id="tab2" style="display: none;">
 
-
<p>This is the text for tab 2.</p>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
</body>
 
-
</html>
 

Latest revision as of 16:35, 13 August 2013