Tab change but same page

Tabs in a Grid

London

Paris

Tokyo

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

<style> .w3-third { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> <div class="w3-container"> <h2>Tabs in a Grid</h2> <div class="w3-row"> <a href="javascript:void(0)" onclick="openCity(event, 'London');"> <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">London</div> </a> <a href="javascript:void(0)" onclick="openCity(event, 'Paris');"> <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Paris</div> </a> <a href="javascript:void(0)" onclick="openCity(event, 'Tokyo');"> <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Tokyo</div> </a> </div> <div class="w3-container city" id="London" style="display: none;"> <h2>London</h2> <p>London is the capital city of England.</p> </div> <div class="w3-container city" id="Paris" style="display: none;"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="w3-container city" id="Tokyo" style="display: none;"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </div> <script> function openCity(evt, cityName) { var i, x, tablinks; x = document.getElementsByClassName("city"); 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(cityName).style.display = "block"; evt.currentTarget.firstElementChild.className += " w3-border-red"; } </script>