From 2013.igem.org
(Difference between revisions)
|
|
(11 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{:Team:UNIK_Copenhagen/template}}
| |
- | <html>
| |
- | <head>
| |
- | <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: 50;
| |
- | 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 class=the_content>
| |
- | <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>
| |
- |
| |
- | </div>
| |
- | </div>
| |
- | </body>
| |
- | </html>
| |
Latest revision as of 16:35, 13 August 2013