|
|
| (78 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Template:Cologne-Duesseldorf/css}}
| |
| − | {{Template:Cologne-Duesseldorf/header}}
| |
| − | <html>
| |
| | | | |
| − | <head>
| |
| − | <style>
| |
| − | .tab {
| |
| − | display:flex;
| |
| − | flex-direction:row;
| |
| − | justify-content: center;
| |
| − | }
| |
| − |
| |
| − | .tab button {
| |
| − | background-color:#fff;
| |
| − | border:none;
| |
| − | border-bottom:5px solid #eee;
| |
| − | outline:none;
| |
| − | transition: 0.3s;
| |
| − | width: 100%;
| |
| − | padding: 20px;
| |
| − | }
| |
| − |
| |
| − | .tab button:hover{
| |
| − | background-color:#eee;
| |
| − | }
| |
| − |
| |
| − | .tab button.active {
| |
| − | border-bottom:5px solid #149375;
| |
| − | }
| |
| − |
| |
| − | .tabcontent {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | .tabcontent:first-child{
| |
| − | display:block;
| |
| − | }
| |
| − |
| |
| − | .tabcontent {
| |
| − | -webkit-animation: fadeEffect 1s;
| |
| − | animation: fadeEffect 1s; /* Fading effect takes 1 second */
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes fadeEffect {
| |
| − | from {opacity: 0;}
| |
| − | to {opacity: 1;}
| |
| − | }
| |
| − |
| |
| − | @keyframes fadeEffect {
| |
| − | from {opacity: 0;}
| |
| − | to {opacity: 1;}
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <article>
| |
| − |
| |
| − | <h2>Medal Criteria</h2>
| |
| − |
| |
| − | <div class="tab">
| |
| − | <button class="tablinks" onclick="openTab(event, 'bronze')" id="defaultOpen">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/thumb/b/b5/T--duesseldorf--medal-bronze1.png/210px-T--duesseldorf--medal-bronze1.png">
| |
| − | </button>
| |
| − | <button class="tablinks" onclick="openTab(event, 'silver')">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/thumb/b/b5/T--duesseldorf--medal-bronze1.png/210px-T--duesseldorf--medal-bronze1.png">
| |
| − | </button>
| |
| − | <button class="tablinks" onclick="openTab(event, 'bronze')" id="defaultOpen">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/thumb/b/b5/T--duesseldorf--medal-bronze1.png/210px-T--duesseldorf--medal-bronze1.png">
| |
| − | </button>
| |
| − | <button class="tablinks" onclick="openTab(event, 'silver')">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/thumb/b/b5/T--duesseldorf--medal-bronze1.png/210px-T--duesseldorf--medal-bronze1.png">
| |
| − | </button>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div id="bronze" class="tabcontent">
| |
| − | <h3>Bronze</h3>
| |
| − | </div>
| |
| − | <div id="silver" class="tabcontent">
| |
| − | <h3>Silver</h3>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </article>
| |
| − | </body>
| |
| − | <script>
| |
| − | function openTab(evt, tabName) {
| |
| − | // Declare all variables
| |
| − | var i, tabcontent, tablinks;
| |
| − |
| |
| − | // Get all elements with class="tabcontent" and hide them
| |
| − | tabcontent = document.getElementsByClassName("tabcontent");
| |
| − | for (i = 0; i < tabcontent.length; i++) {
| |
| − | tabcontent[i].style.display = "none";
| |
| − | }
| |
| − |
| |
| − | // Get all elements with class="tablinks" and remove the class "active"
| |
| − | tablinks = document.getElementsByClassName("tablinks");
| |
| − | for (i = 0; i < tablinks.length; i++) {
| |
| − | tablinks[i].className = tablinks[i].className.replace(" active", "");
| |
| − | }
| |
| − |
| |
| − | // Show the current tab, and add an "active" class to the button that opened the tab
| |
| − | document.getElementById(tabName).style.display = "block";
| |
| − | evt.currentTarget.className += " active";
| |
| − | }
| |
| − | // Get the element with id="defaultOpen" and click on it
| |
| − | document.getElementById("defaultOpen").click();
| |
| − | </script>
| |
| − | </html>
| |
| − | {{Template:Cologne-Duesseldorf/footer}}
| |
| − | {{Template:Cologne-Duesseldorf/js}}
| |
