Question

我正在尝试编写一个JQuery If Statement ..我想要实现的目的基本上是在点击某个div（infotab）时突出显示相应的链接（a）。它们都是隐藏的，你可以看到，但点击后，可以看到一个漂亮的淡入淡出。我想突出显示已单击的项目。（将背景颜色更改为我想要的颜色，例如下面代码中的红色。）

我下面的代码有效，但不正确。它突出了该div中的所有a。我只想点击一下突出显示的那个。谢谢你的帮助，你们很棒。

$(document).ready(function () {
    $('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});

$('.subnav_holster li').click(function () {
    var Vinfotab = this.id + '_s';
    $('.infotab:visible').fadeOut('fast', function () {
        $('#' + Vinfotab).fadeIn('fast');
        var Vinfotab_selected = 'Vinfotab:visible';
        $("subnav_holster li a").css({
            "color": "red"
        });
    });
});

Answer 1

抓住点击的li并访问该元素的a：

$('.subnav_holster li').click(function () {
    var Vinfotab = this.id + '_s';
    var clicked = $(this);
    $('.infotab:visible').fadeOut('fast', function () {
        $('#' + Vinfotab).fadeIn('fast');
        var Vinfotab_selected = 'Vinfotab:visible';
        clicked.find('a').css({
            "color": "red"
        });
    });
});

Answer 2

您应该缓存this，然后突出显示它：

$('.subnav_holster li').click(function () {
    var Vinfotab = this.id + '_s',
        $this = $(this);
    $('.infotab:visible').fadeOut('fast', function () {
        $('#' + Vinfotab).fadeIn('fast');
        var Vinfotab_selected = 'Vinfotab:visible';
        $('.subnav_holster li a').css({
            "background-color": "white" // reset all to default color
        });
        $this.find('a').css({
            "background-color": "red"   // set highlight to this element only
        });
    });
});

编写JQuery If Statement

2 个答案: