Difference between revisions of "Team:Cologne-Duesseldorf/Test2"
| Line 2: | Line 2: | ||
{{Template:Cologne-Duesseldorf/header}} | {{Template:Cologne-Duesseldorf/header}} | ||
<html> | <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> | <body> | ||
<article> | <article> | ||
| Line 35: | Line 88: | ||
</article> | </article> | ||
</body> | </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> | </html> | ||
{{Template:Cologne-Duesseldorf/footer}} | {{Template:Cologne-Duesseldorf/footer}} | ||
{{Template:Cologne-Duesseldorf/js}} | {{Template:Cologne-Duesseldorf/js}} | ||
Revision as of 15:10, 27 October 2017
