|
|
| (8 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | {{:Team:UNIK_Copenhagen/template}}
| |
| - | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| |
| - | <html xmlns="http://www.w3.org/1999/xhtml">
| |
| | | | |
| - | <head>
| |
| - | <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
| |
| - | <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>
| |
"
