Team:Uppsala/Templates/top template

From 2014.igem.org

(Difference between revisions)
Line 83: Line 83:
   
   
             </div>   <!-- Ends tracking_system -->  
             </div>   <!-- Ends tracking_system -->  
-
                      
+
                 
 +
            <div id="section_selector">
 +
 
 +
                  <ul id="tabs">
 +
                     <li><a href="#" title="tab1">One</a></li>
 +
                    <li><a href="#" title="tab2">Two</a></li>
 +
                    <li><a href="#" title="tab3">Three</a></li>
 +
                    <li><a href="#" title="tab4">Four</a></li>
 +
                  </ul>
 +
 
 +
            </div> 
 +
 
 +
          <div id="tab1">One - content</div>
 +
    <div id="tab2">Two - content</div>
 +
    <div id="tab3">Three - content</div>
 +
    <div id="tab4">Four - content</div>
 +
 
 +
<script>
 +
 
 +
$(document).ready(function() {
 +
    $("#content div").hide(); // Initially hide all content
 +
    $("#tabs li:first").attr("id","current"); // Activate first tab
 +
    $("#content div:first").fadeIn(); // Show first tab content
 +
   
 +
    $('#tabs a').click(function(e) {
 +
        e.preventDefault();       
 +
        $("#content div").hide(); //Hide all content
 +
        $("#tabs li").attr("id",""); //Reset id's
 +
        $(this).parent().attr("id","current"); // Activate this
 +
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
 +
    });
 +
})();
 +
 
 +
</script>
            
            
<!-- Content for the page should be put here, 3 on the picture (Mainpage) -->
<!-- Content for the page should be put here, 3 on the picture (Mainpage) -->
<div>
<div>
</html>
</html>

Revision as of 16:25, 2 July 2014

Project

Failed to load tracking. JS is probably not enabled

One - content
Two - content
Three - content
Four - content