Create Tab Navigation with JavaScript

1 year ago
Benjamin Taylor
2 minutes

Creating tabbed navigation can be achieved by using JavaScript along with some basic HTML and CSS. Here is a simple example:

  1. First, create an HTML file that includes the structure and style of tabs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabs Example</title>
<style>
.tab {
  display: none;
}
.active {
  display: block;
}
</style>
</head>
<body>

<div class="tab" id="tab1">
  <h2>Tab 1 Content</h2>
  <p>This is the content for tab 1.</p>
</div>

<div class="tab" id="tab2">
  <h2>Tab 2 Content</h2>
  <p>This is the content for tab 2.</p>
</div>

<div class="tab" id="tab3">
  <h2>Tab 3 Content</h2>
  <p>This is the content for tab 3.</p>
</div>

<button onclick="showTab(1)">Tab 1</button>
<button onclick="showTab(2)">Tab 2</button>
<button onclick="showTab(3)">Tab 3</button>

<script>
function showTab(tabIndex) {
  var tabs = document.getElementsByClassName('tab');
  
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].style.display = 'none';
  }
  
  document.getElementById('tab' + tabIndex).style.display = 'block';
}
</script>

</body>
</html>

In this example, we have defined three tab content blocks (tab1, tab2, tab3) and three buttons, with each button corresponding to a tab. When a button is clicked, the showTab function is called to display the corresponding tab content.

  1. Open the browser to preview the HTML file, and clicking the button allows you to switch between different tab contents.

This is a simple example of implementing tabs using JavaScript. You can customize and expand it according to your actual needs and styles.

bannerAds