|
|
| 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> |
