"
Team:NCTU Formosa/source/header/Test
From 2014.igem.org
(Difference between revisions)
| Line 2: | Line 2: | ||
<style> | <style> | ||
| + | #tabs { | ||
| + | overflow: auto; | ||
| + | width: 100%; | ||
| + | list-style: none; | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | } | ||
| + | #tabs li { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | #tabs a { | ||
| + | box-shadow: -4px 0 0 rgba(0, 0, 0, .2); | ||
| + | background: #ad1c1c; | ||
| + | background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px); | ||
| + | text-shadow: 0 1px 0 rgba(0,0,0,.5); | ||
| + | color: #fff; | ||
| + | float: left; | ||
| + | font: bold 12px/35px 'Lucida sans', Arial, Helvetica; | ||
| + | height: 35px; | ||
| + | padding: 0 30px; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | #tabs a:hover { | ||
| + | background: #c93434; | ||
| + | background: linear-gradient(220deg, transparent 10px, #c93434 10px); | ||
| + | } | ||
| + | |||
| + | #tabs a:focus { | ||
| + | outline: 0; | ||
| + | } | ||
| + | |||
| + | #tabs #current a { | ||
| + | background: #fff; | ||
| + | background: linear-gradient(220deg, transparent 10px, #fff 10px); | ||
| + | text-shadow: none; | ||
| + | color: #333; | ||
| + | } | ||
| + | |||
| + | #content { | ||
| + | background-color: #fff; | ||
| + | background-image: linear-gradient(top, #fff, #ddd); | ||
| + | border-radius: 0 2px 2px 2px; | ||
| + | box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset; | ||
| + | padding: 30px; | ||
| + | } | ||
| + | |||
| + | /* Remove the rule below if you want the content to be "organic" */ | ||
| + | #content div { | ||
| + | height: 220px; | ||
| + | } | ||
| Line 121: | Line 175: | ||
} | } | ||
</style> | </style> | ||
| + | <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> | ||
Revision as of 11:35, 13 October 2014
