Creating a tab component using vanilla javascript

Question

Creating a tab component using vanilla javascript

I am facing an issue with my tab component in plain JavaScript. The content displays correctly in debug mode, but after compilation, it does not show up on the browser. Additionally, when I select a tab, the 'activeNav' class is applied to indicate the active state, but it disappears once the page fully loads. Can someone help me identify what I may be doing wrong?

function selectTab(evnt, targetBlock) {
  var i;
  var elementList = document.getElementsByClassName("displayContent");

  for (i = 0; i < elementList.length; i++) {
    if (elementList[i].id === targetBlock) {
      elementList[i].style.display = "inherit";
    }
  }

  evnt.currentTarget.classList.add("activeNav");
}

.displayContent {
  display: none;
  border: 1px solid #efefef;
  background-color: pink;
}

.active {
  display: inherit;
}

.activeNav {
  border: 1px solid red !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-1')">Tab title 1</a></li>
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-2')">Tab title 2</a></li>
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-3')">Tab title 3</a></li>
</ul>
<div id="Tabtitle-1" class="displayContent">
  <p>Content Block 1</p>
</div>
<div id="Tabtitle-2" class="displayContent">
  <p>Content Block 2</p>
</div>
<div id="Tabtitle-3" class="displayContent">
  <p>Content Block 3</p>
</div>

javascript html css

Answer 1

Answer №1

The anchor tag is causing the page to reload.

To stop the page from reloading, you need to use event.preventDefault().

function selectTab(evnt, targetBlock) {
  evnt.preventDefault();
  var i;
  var elementList=document.getElementsByClassName("displayContent");

  for(i = 0; i < elementList.length; i++) {
    if (elementList[i].id === targetBlock) {
      elementList[i].style.display = "inherit";
    }
  }

  evnt.currentTarget.classList.add("activeNav");
}

.displayContent {
  display: none;
  border: 1px solid #efefef;
  background-color: pink;
}
.active {
  display: inherit;
}
.activeNav {
  border: 1px solid red !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
<li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-1')">Tab title 1</a></li>
<li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-2')">Tab title 2</a></li>
<li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-3')">Tab title 3</a></li>
</ul>
<div id="Tabtitle-1" class="displayContent">
<p>Content Block 1</p>
</div>
<div id="Tabtitle-2" class="displayContent">
<p>Content Block 2</p>
</div>
<div id="Tabtitle-3" class="displayContent">
<p>Content Block 3</p>
</div>

Answer 2

The anchor tag is causing the page to reload.

To stop the page from reloading, you need to use event.preventDefault().

function selectTab(evnt, targetBlock) {
  evnt.preventDefault();
  var i;
  var elementList=document.getElementsByClassName("displayContent");

  for(i = 0; i < elementList.length; i++) {
    if (elementList[i].id === targetBlock) {
      elementList[i].style.display = "inherit";
    }
  }

  evnt.currentTarget.classList.add("activeNav");
}

.displayContent {
  display: none;
  border: 1px solid #efefef;
  background-color: pink;
}
.active {
  display: inherit;
}
.activeNav {
  border: 1px solid red !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
<li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-1')">Tab title 1</a></li>
<li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-2')">Tab title 2</a></li>
<li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-3')">Tab title 3</a></li>
</ul>
<div id="Tabtitle-1" class="displayContent">
<p>Content Block 1</p>
</div>
<div id="Tabtitle-2" class="displayContent">
<p>Content Block 2</p>
</div>
<div id="Tabtitle-3" class="displayContent">
<p>Content Block 3</p>
</div>

Answer 3

Answer №2

So, when you click on an Anchor tag, it triggers the default behavior of refreshing and navigating to a new page.

To prevent this default action, you can use the following JavaScript function:

function showTab(event, target) {
  event.preventDefault();
  var j;
  var elements = document.getElementsByClassName("showContent");

  for(j = 0; j < elements.length; j++) {
    if (elements[j].id === target) {
      elements[j].style.display = "block";
    }
  }

  event.currentTarget.classList.add("activeLink");
}

Answer 4

So, when you click on an Anchor tag, it triggers the default behavior of refreshing and navigating to a new page.

To prevent this default action, you can use the following JavaScript function:

function showTab(event, target) {
  event.preventDefault();
  var j;
  var elements = document.getElementsByClassName("showContent");

  for(j = 0; j < elements.length; j++) {
    if (elements[j].id === target) {
      elements[j].style.display = "block";
    }
  }

  event.currentTarget.classList.add("activeLink");
}

Answer 5

Answer №3

To hide other tabs in an "else" condition, you must set display:none and remove the activeNav class from them using a for loop.

In addition, you can use evnt.preventDefault() in JavaScript or javascript:void(0) in the <a> tags' href to prevent the page from reloading.

Code Example:

function selectTab(evnt, targetBlock) {
  var i;
  var elementList = document.getElementsByClassName("displayContent");
  var anchorList = document.querySelectorAll(".a");
  for (i = 0; i < elementList.length; i++) {
    evnt.preventDefault();
    anchorList[i].classList.remove("activeNav");
    if (elementList[i].id === targetBlock) {
      elementList[i].style.display = "block";
    } else {
      elementList[i].style.display = "none";
    }
  }
  evnt.currentTarget.classList.add("activeNav");
}

.displayContent {
  display: none;
  border: 1px solid #efefef;
  background-color: pink;
}

.activeNav {
  border: 1px solid red !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-1')">Tab title 1</a></li>
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-2')">Tab title 2</a></li>
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-3')">Tab title 3</a></li>
</ul>
<div id="Tabtitle-1" class="displayContent">
  <p>Content Block 1</p>
</div>
<div id="Tabtitle-2" class="displayContent">
  <p>Content Block 2</p>
</div>
<div id="Tabtitle-3" class="displayContent">
  <p>Content Block 3</p>
</div>

Answer 6

To hide other tabs in an "else" condition, you must set display:none and remove the activeNav class from them using a for loop.

In addition, you can use evnt.preventDefault() in JavaScript or javascript:void(0) in the <a> tags' href to prevent the page from reloading.

Code Example:

function selectTab(evnt, targetBlock) {
  var i;
  var elementList = document.getElementsByClassName("displayContent");
  var anchorList = document.querySelectorAll(".a");
  for (i = 0; i < elementList.length; i++) {
    evnt.preventDefault();
    anchorList[i].classList.remove("activeNav");
    if (elementList[i].id === targetBlock) {
      elementList[i].style.display = "block";
    } else {
      elementList[i].style.display = "none";
    }
  }
  evnt.currentTarget.classList.add("activeNav");
}

.displayContent {
  display: none;
  border: 1px solid #efefef;
  background-color: pink;
}

.activeNav {
  border: 1px solid red !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-1')">Tab title 1</a></li>
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-2')">Tab title 2</a></li>
  <li><a class="a" href="" onclick="selectTab(event, 'Tabtitle-3')">Tab title 3</a></li>
</ul>
<div id="Tabtitle-1" class="displayContent">
  <p>Content Block 1</p>
</div>
<div id="Tabtitle-2" class="displayContent">
  <p>Content Block 2</p>
</div>
<div id="Tabtitle-3" class="displayContent">
  <p>Content Block 3</p>
</div>

Creating a tab component using vanilla javascript

Answer №1

Answer №2

Answer №3

Similar questions

"Step-by-step guide on adding and deleting a div element with a double click

Display only a loading image with a see-through background after submitting the page

Discovering the right place to establish global data in Nuxt JS

Troubleshooting Problems with Owl Carousel Loading

The Express middleware is not being utilized

Learn how to utilize ajax and jquery to fetch data from an external database without the need for refreshing the page

Present the retrieved JSON data values in an alternative layout on the table

Steps to create a TypeScript function that mimics a JavaScript function

Expanding the outer div horizontally by using inner divs with scroll

How can the checkers code be corrected due to a mistake?

Using Python, Selenium, and Beautiful Soup to scrape LinkedIn data while being logged in and accessing user accounts

Inject JSON data into a JavaScript array

Unexpected disconnection from Socket.io server

What steps can I take to troubleshoot issues when creating a React app?

What are the steps to ensure availability validation with jQuery validation?

Modifying the Header Background Color

Warning: Non-power of two image detected in Three.js

Mac users may experience lag when using Javascript parallax effects

Difficulty with Nuxt + Vuex: Retrieving data from state using getter

Having trouble retrieving values for jVectorMap? The getElementById method doesn't seem to be functioning as