I currently have a set of 3 tabs, with the first tab initially highlighted. I attempted to use some JQuery code in order to highlight a selected or active tab, but for some reason it is not working as expected.
Any assistance would be greatly appreciated.
Thank you
<div class="tabs tab-active" id="tab-part1">Etiam</div>
<div class="tabs" id="tab-part2">CatM1(LTE)</div>
<div class="tabs" id="tab-part3">LTE</div>
<div class="tab-parts">
<div id="part1">
This is part1
</div>
<div id="part2">
This is part2
</div>
<div id="part3">
This is part3
</div>
</div>
JS
$(function () {
$('#tab-part1').click((event) => {
$(this).siblings().removeClass('tab-active');
$(this).addClass('tab-active');
$(this).find('.tab-parts #part2, .tab-parts #part3').hide();
$(this).find('.tab-parts #part1').show();
});
$('#tab-part2').click((event) => {
$(this).siblings().removeClass('tab-active');
$(this).addClass('tab-active');
$(this).find('.tab-parts #part1, .tab-parts #part3').hide();
$(this).find('.tab-parts #part2').show();
});
$('#tab-part3').click((event) => {
$(this).siblings().removeClass('tab-active');
$(this).addClass('tab-active');
$(this).find('.tab-parts #part1, .tab-parts #part2').hide();
$(this).find('.tab-parts #part3').show();
});
});