JavaScript by Example

Setting up tab sections

The tabs should work such that only one of the charts is visible at a given time. Also, the selected tab should be marked active using the .active class. A simple solution to this problem is hiding all the charts, removing .active from all the tab items, and then adding .active only to the clicked tab item and displaying the required chart. This way, we can easily get the required tab functionality.

First, create a method inside the Status class to clear the selected tabs and hide all the charts:

hideCharts() {  this.$experienceTab.parentElement.classList.remove('active');  this.$professionTab.parentElement.classList.remove('active');  this.$ageTab.parentElement.classList.remove('active'); this.$ageCanvas.classList.add('hidden'); ...