Test Page: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<div id=" | <p>Click on the buttons inside the tabbed menu:</p> | ||
<div id="London" class="tabcontent"> | |||
<h1>London</h1> | |||
<p>London is the capital city of England.</p> | |||
</div> | </div> | ||
<div id=" | <div id="Paris" class="tabcontent"> | ||
<h1>Paris</h1> | |||
<p>Paris is the capital of France.</p> | |||
</div> | </div> | ||
<div id=" | <div id="Tokyo" class="tabcontent"> | ||
<h1>Tokyo</h1> | |||
<p>Tokyo is the capital of Japan.</p> | |||
</div> | </div> | ||
<div id=" | <div id="Oslo" class="tabcontent"> | ||
<h1>Oslo</h1> | |||
<p>Oslo is the capital of Norway.</p> | |||
</div> | </div> | ||
| Line 19: | Line 25: | ||
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> | <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> | ||
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> | <button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> | ||
<script> | |||
function openCity(cityName,elmnt,color) { | |||
var i, tabcontent, tablinks; | |||
tabcontent = document.getElementsByClassName("tabcontent"); | |||
for (i = 0; i < tabcontent.length; i++) { | |||
tabcontent[i].style.display = "none"; | |||
} | |||
tablinks = document.getElementsByClassName("tablink"); | |||
for (i = 0; i < tablinks.length; i++) { | |||
tablinks[i].style.backgroundColor = ""; | |||
} | |||
document.getElementById(cityName).style.display = "block"; | |||
elmnt.style.backgroundColor = color; | |||
} | |||
// Get the element with id="defaultOpen" and click on it | |||
document.getElementById("defaultOpen").click(); | |||
</script> | |||
Revision as of 14:15, 5 September 2022
Click on the buttons inside the tabbed menu:
London
London is the capital city of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Oslo
Oslo is the capital of Norway.
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> <button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> <button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
<script> function openCity(cityName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
} // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script>