Line 1: | Line 1: | ||
{{Melbourne}} | {{Melbourne}} | ||
<html> | <html> | ||
+ | |||
+ | <script> | ||
+ | function openCity(cityName) { | ||
+ | var i; | ||
+ | var x = document.getElementsByClassName("city"); | ||
+ | for (i = 0; i < x.length; i++) { | ||
+ | x[i].style.display = "none"; | ||
+ | } | ||
+ | document.getElementById(cityName).style.display = "block"; | ||
+ | } | ||
+ | </script> | ||
<head> | <head> | ||
Line 12: | Line 23: | ||
<body> | <body> | ||
+ | |||
+ | <div class="w3-bar w3-black"> | ||
+ | <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button> | ||
+ | <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button> | ||
+ | <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div id="London" class="city"> | ||
+ | <h2>London</h2> | ||
+ | <p>London is the capital of England.</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="Paris" class="city" style="display:none"> | ||
+ | <h2>Paris</h2> | ||
+ | <p>Paris is the capital of France.</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="Tokyo" class="city" style="display:none"> | ||
+ | <h2>Tokyo</h2> | ||
+ | <p>Tokyo is the capital of Japan.</p> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 12:17, 16 October 2018
London
London is the capital of England.