Dynamic onclick javascript Tab

by Santosh Thakur

HTML

<a href="#" class='flightTab tab0' onclick="openTab(event, 'tab0')" id="defaultOpen">Tab 0 </a> ||| 
<a href="#" class='flightTab tab1' onclick="openTab(event, 'tab1')">Tab 1 </a>

<div id='tab0' class='flightContent'>
<h1> Tab 0 Content </h1>
  An image is an artifact that depicts visual perception, for example, a photo or a two-dimensional picture, that has a similar appearance to some subject—usually a physical object or a person, thus providing a depiction of it.
</div>
<div id='tab1' class='flightContent'>
<h1>Tab 1 Content</h1>
An image is an artifact that depicts visual perception, for example, a photo or a two-dimensional picture, that has a similar appearance to some subject—usually a physical object or a person, thus providing a depiction of it.
</div>

CSS

.active {
  color: red;
}
.flightContent{
  display:none;
}

JavaScript

function openTab(evt, id) {
  var i, flightTab, flightContent;
  flightContent = document.getElementsByClassName("flightContent");
  for (i = 0; i < flightContent.length; i++) {
    flightContent[i].style.display = "none";
  }
  flightTab = document.getElementsByClassName("flightTab");
  for (i = 0; i < flightTab.length; i++) {
    flightTab[i].className = flightTab[i].className.replace(" active", "");
  }
  document.getElementById(id).style.display = "block";
  evt.currentTarget.className += " active";
};

document.getElementById("defaultOpen").click();