jquery - 选项卡 - 突出显示事件选项卡

Question

我有 3 个标签，默认情况下第一个标签是突出显示的。我写了一些 JQuery 来突出显示选定的选项卡或事件选项卡，但不知何故它不起作用。

请伸出援手。

谢谢

<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();
     });
 });

This is its jsfiddle

Answer 1

您不需要为每个不同的选项卡设置不同的点击处理程序。而是像这样在一个事件处理程序中处理它:

$(function () {
     $('.tabs').click((event) => {
        const tab = $(event.target);
        const activeTab = $('.tab-active');
        activeTab.removeClass('tab-active')
        tab.addClass('tab-active');
     });
 });

编辑:需要额外的逻辑来显示隐藏下面的文本，但这应该足够简单。我专注于解决您处理事件选项卡的问题陈述。

在这里工作:http://jsfiddle.net/so17whdc/

希望这对您有所帮助。