Difference between revisions of "Team:Duesseldorf/Test2"
| Line 6: | Line 6: | ||
<style> | <style> | ||
.requirement {display:none;} | .requirement {display:none;} | ||
| − | .w3-container:after,.w3-row:after {content:"";display:table;clear:both | + | .w3-container{} |
| − | .w3-third {float:left;width:33.33333% | + | .w3-container:after,.w3-row:after {content:"";display:table;clear:both} |
| − | .w3-bottombar{border-bottom:6px solid #ccc!important | + | .w3-third {float:left;width:33.33333%} |
| − | .w3-hover-light-grey:hover{color:#000!important;background-color:#f1f1f1!important | + | .w3-bottombar{border-bottom:6px solid #ccc!important} |
| − | .w3-padding {padding:8px 16px!important | + | .w3-hover-light-grey:hover{color:#000!important;background-color:#f1f1f1!important} |
| − | .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important | + | .w3-padding {padding:8px 16px!important} |
| + | .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important} | ||
@media only screen and (max-width: 1024px) { | @media only screen and (max-width: 1024px) { | ||
| Line 17: | Line 18: | ||
} | } | ||
</style> | </style> | ||
| − | |||
</head> | </head> | ||
| Line 78: | Line 78: | ||
<div class="w3-container"> | <div class="w3-container"> | ||
<div class="w3-row"> | <div class="w3-row"> | ||
| − | <a href="javascript:void(0)" onclick="openrequirement(event, 'Bronze');"> | + | <a href="javascript:void(0)" onclick="openrequirement(event, 'Bronze');"> |
| + | <span class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Bronze</span> | ||
| + | </a> | ||
| + | <a href="javascript:void(0)" onclick="openrequirement(event, 'Silver');"> | ||
| + | <span class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Silver</span> | ||
| + | </a> | ||
| + | <a href="javascript:void(0)" onclick="openrequirement(event, 'Gold');"> | ||
| + | <span class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Gold</span> | ||
| + | </a> | ||
| + | </div> | ||
| − | < | + | <div id="Bronze" class="w3-container requirement"> |
| + | <h2>Bronze</h2> | ||
| + | <p>Bronze text.</p> | ||
| + | </div> | ||
| − | </ | + | <div id="Silver" class="w3-container requirement"> |
| − | <p> | + | <h2>Silver</h2> |
| − | </div> | + | <p>Silver text.</p> |
| + | </div> | ||
| + | |||
| + | <div id="Gold" class="w3-container requirement"> | ||
| + | <h2>Gold</h2> | ||
| + | <p>Gold text.</p> | ||
| + | </div> | ||
</div> | </div> | ||
| Line 122: | Line 140: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <script> | ||
| + | function openrequirement(evt, requirementName) { | ||
| + | var i, x, tablinks; | ||
| + | x = document.getElementsByClassName("requirement"); | ||
| + | for (i = 0; i < x.length; i++) { | ||
| + | x[i].style.display = "none"; | ||
| + | } | ||
| + | tablinks = document.getElementsByClassName("tablink"); | ||
| + | for (i = 0; i < x.length; i++) { | ||
| + | tablinks[i].className = tablinks[i].className.replace(" w3-border-red", ""); | ||
| + | } | ||
| + | document.getElementById(requirementName).style.display = "block"; | ||
| + | evt.currentTarget.firstElementChild.className += " w3-border-red"; | ||
| + | } | ||
| + | </script> | ||
</body> | </body> | ||
Revision as of 13:20, 18 October 2016
 |
|
Heinrich-Heine University Universitätsstraße 1 40225 Düsseldorf igem@hhu.de facebook.com/igemhhu Design by Marvin van Aalst |
