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

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. 