Team:Tianjin/Team
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
{{:Team:Tianjin/frame/team}} | {{:Team:Tianjin/frame/team}} | ||
- | == | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
- | + | <head> | |
- | + | <style type="text/css"> | |
- | == | + | h1 { |
- | + | font-size: 3em; | |
- | == | + | margin: 20px 0; |
- | + | } | |
- | == | + | .container { |
- | + | width: 800px; | |
- | == | + | margin: 10px auto; |
- | + | } | |
- | == | + | ul.tabs { |
- | + | margin: 0; | |
- | == | + | padding: 0; |
- | + | float: left; | |
- | == | + | list-style: none; |
- | + | height:0; | |
- | {{:Team:Tianjin/ | + | width: 180px; |
+ | } | ||
+ | ul.tabs li { | ||
+ | float: left; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | height: 31px; | ||
+ | line-height: 31px; | ||
+ | border: 8px solid #b63092; | ||
+ | border-right:none; | ||
+ | margin-bottom: 3px; | ||
+ | background: #b63092; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | width:180px; | ||
+ | } | ||
+ | ul.tabs li a { | ||
+ | text-decoration: none; | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | font-size: 1.2em; | ||
+ | padding: 0 20px; | ||
+ | outline: none; | ||
+ | } | ||
+ | ul.tabs li a:hover { | ||
+ | background: #83245f; | ||
+ | } | ||
+ | html ul.tabs li.active, html ul.tabs li.active a:hover { | ||
+ | background: #fff; | ||
+ | border-right:none; | ||
+ | } | ||
+ | html ul.tabs li.active a{ | ||
+ | color:#000; | ||
+ | } | ||
+ | .tab_container { | ||
+ | border: 8px solid #b63092; | ||
+ | clear: both; | ||
+ | float: right; | ||
+ | width: 604px; | ||
+ | height:600px; | ||
+ | background: #fff; | ||
+ | -moz-border-radius-bottomright: 100px; | ||
+ | -khtml-border-radius-bottomright: 100px; | ||
+ | -webkit-border-bottom-right-radius: 100px; | ||
+ | } | ||
+ | .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> | ||
+ | <script type="text/javascript" src="http://www.xker.com/js/img/jquery1.3.2.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> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class="container"> | ||
+ | <ul class="tabs"> | ||
+ | <li class="active"><a href="#tab1">The Whole Team</a></li> | ||
+ | <li><a href="#tab2" id="">tab2</a></li> | ||
+ | <li><a href="#tab3">tab3</a></li> | ||
+ | <li><a href="#tab4">tab4</a></li> | ||
+ | </ul> | ||
+ | <div class="tab_container"> | ||
+ | <div id="tab1" class="tab_content" style="display: block;"> | ||
+ | 111111111111111 | ||
+ | </div> | ||
+ | <div id="tab2" class="tab_content" style="display: none;"> | ||
+ | 222222222222222 | ||
+ | </div> | ||
+ | <div id="tab3" class="tab_content" style="display: none;"> | ||
+ | 333333333333333 | ||
+ | </div> | ||
+ | <div id="tab4" class="tab_content" style="display: none;"> | ||
+ | 444444444444444 | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | {{:Team:Tianjin/nowrapfooter}} |
Revision as of 08:05, 24 September 2012
111111111111111