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

您只需用函数替换您的（事件），因为当您对此事件进行(event) => $(this)'this'引用时，那就是点击事件而不是元素

          $(function () {
     $('#tab-part1').click(function(){
            $(this).siblings().removeClass('tab-active');
        $(document).find('.tab-parts #part2, .tab-parts #part3').hide();
        $(this).addClass('tab-active');
        $(document).find('.tab-parts #part1').show();
     });
     $('#tab-part2').click(function() {
        $(this).siblings().removeClass('tab-active');
        $(this).addClass('tab-active');
        $(document).find('.tab-parts #part1, .tab-parts #part3').hide();
        $(document).find('.tab-parts #part2').show();

     });
     $('#tab-part3').click(function(){
     $(this).siblings().removeClass('tab-active');
            $(this).addClass('tab-active');
        $(document).find('.tab-parts #part1, .tab-parts #part2').hide();
        $(document).find('.tab-parts #part3').show();
     });
 });

Answer 2

对于每个不同的标签，您都不需要具有不同的点击处理程序。而是仅在这样的一个事件处理程序中处理它：

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

编辑：将需要其他逻辑来显示下面的隐藏文本，但这应该足够简单。我专注于解决您处理活动标签的问题陈述。

在这里工作的小提琴：http://jsfiddle.net/so17whdc/

希望这会有所帮助。

标签-高亮显示活动标签

2 个答案: