Tab change but same page

Tabs in a Grid


 <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>
Search This Blog

Blogger Codes

Tab change but same page

Tabs in a Grid

London

Paris

Tokyo

Comments

Post a Comment
