All web applications have some method of allowing the user to navigate to different sections of the application. **Tabs** are commonly used to achieve this. 

# Code
The following code snippet uses HTML, JavaScript, and CSS to create tabs:

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<html>
 <head>
 </head>
 <body>
  <h3>Click on the tabs below:</h3>
  <div class="tab">
    <button class="tablinks" onclick="clickHandle(event, 'Cat')">Cat</button>
    <button class="tablinks" onclick="clickHandle(event, 'Bear')">Bear</button>
    <button class="tablinks" onclick="clickHandle(event, 'Dog')">Dog</button>
  </div>

  <div id="Cat" class="tabcontent">
    <h3>Meowww.</h3>
  </div>

  <div id="Bear" class="tabcontent">
    <h3>Rawrrr.</h3>
  </div>

  <div id="Dog" class="tabcontent">
    <h3>Bork Bork.</h3>
</div>

<script>
function clickHandle(evt, animalName) {
  let i, tabcontent, tablinks;

  // This is to clear the previous clicked content.
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Set the tab to be "active".
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Display the clicked tab and set it to active.
  document.getElementById(animalName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

 </body>
</html>

document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
  pTag.appendChild(newVal);
});







codemirror

## Explanation
- **Lines 6-10** create the three buttons that act as tabs. All of them have an `onClick` handler associated with them.
- **Lines 12-22** create the content to be displayed once the tabs are clicked. 
- **Lines 24-44** contain the JavaScript code for the `clickHandle` function, which is invoked when a tab button is clicked. The function sets the clicked tab to be *​active* and displays its corresponding content.

How to create tabs in HTML

Code

Explanation