Switching Tabs Using Js With Active Class

I want to switch tabs when I select one of the options of the current tab. The next tab content does the switch but not the tab itself. I've followed this example jsfiddle.net/ah97

Solution 1:

If all you want to do is to switch the tab when one of the list item is selected, you need to just figure how to switch the css classes between the siblings.

I will take the example of switching between the year tab and the car brand tab.

First you need to assign some class(year-option in your example) to the li items which will be linked to a listener.

<ulclass="tire-selector"><li><adata-toggle="pill"href="#pills-profile"class="list-group-item year-option">2018</a></li><li><adata-toggle="pill"href="#pills-profile"class="list-group-item year-option">2019</a></li>
 .......
 .......
</ul>

JS

$(".year-option").click(function() {
  // first remove the active class from all the nav-links
  $('.nav-link').removeClass('active');
  // then apply active class on the target nav-link's id
  $('#pills-profile-tab').addClass('active')

  // same with the list containers, here you need to switch two classes
  $('tab-pane').removeClass('show active')
  $('pills-profile').addClass('show active')
});

When it comes to ui elements that shows and hides itself on some action, in most of the cases it will be because of some class(es) being added and removed. Just look for those classes and switch it between it's siblings.