|
|
(4 intermediate revisions by the same user not shown) |
Line 2: |
Line 2: |
| <html> | | <html> |
| | | |
− |
| |
− | <script>
| |
− | function openCity(cityName, elmnt, color) {
| |
− | // Hide all elements with class="tabcontent" by default */
| |
− | var i, tabcontent, tablinks;
| |
− | tabcontent = document.getElementsByClassName("tabcontent");
| |
− | for (i = 0; i < tabcontent.length; i++) {
| |
− | tabcontent[i].style.display = "none";
| |
− | }
| |
− |
| |
− | // Remove the background color of all tablinks/buttons
| |
− | tablinks = document.getElementsByClassName("tablink");
| |
− | for (i = 0; i < tablinks.length; i++) {
| |
− | tablinks[i].style.backgroundColor = "";
| |
− | }
| |
− |
| |
− | // Show the specific tab content
| |
− | document.getElementById(cityName).style.display = "block";
| |
− |
| |
− | // Add the specific color to the button used to open the tab content
| |
− | elmnt.style.backgroundColor = color;
| |
− | }
| |
− |
| |
− | // Get the element with id="defaultOpen" and click on it
| |
− | document.getElementById("defaultOpen").click();
| |
− | </script>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <style>
| |
− | /* Style the tab buttons */
| |
− | .tablink {
| |
− | background-color: #555;
| |
− | color: white;
| |
− | float: left;
| |
− | border: none;
| |
− | outline: none;
| |
− | cursor: pointer;
| |
− | padding: 14px 16px;
| |
− | font-size: 17px;
| |
− | width: 25%;
| |
− | }
| |
− |
| |
− | /* Change background color of buttons on hover */
| |
− | .tablink:hover {
| |
− | background-color: #777;
| |
− | }
| |
− |
| |
− | /* Set default styles for tab content */
| |
− | .tabcontent {
| |
− | color: white;
| |
− | display: none;
| |
− | padding: 50px;
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | /* Style each tab content individually */
| |
− | #London {background-color:red;}
| |
− | #Paris {background-color:green;}
| |
− | #Tokyo {background-color:blue;}
| |
− | #Oslo {background-color:orange;}
| |
− | </style>
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | <body>
| |
− | <br><br><br><br><br>
| |
− | <br><br><br><br><br>
| |
− |
| |
− | <button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">Project Overview/button>
| |
− | <button class="tablink" onclick="openCity('Paris', this, 'green')">Experiment</button>
| |
− | <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Notebook</button>
| |
− | <button class="tablink" onclick="openCity('Oslo', this, 'orange')">Attribution</button>
| |
− |
| |
− | <div id="London" class="tabcontent">
| |
− | <h1>Project Overview</h1>
| |
− | <p>OVERVIEW</p>
| |
− | </div>
| |
− |
| |
− | <div id="Paris" class="tabcontent">
| |
− | <h1>Experiment</h1>
| |
− | <p>EXP</p>
| |
− | </div>
| |
− |
| |
− | <div id="Tokyo" class="tabcontent">
| |
− | <h1>Notebook</h1>
| |
− | <p>NB</p>
| |
− | </div>
| |
− |
| |
− | <div id="Oslo" class="tabcontent">
| |
− | <h1>Attributions</h1>
| |
− | <p>ATTR</p>
| |
− | </div>
| |
− |
| |
− |
| |
− | </body>
| |
| </html> | | </html> |