javascript - 遍历选择器，通过点击元素的索引号

Question

我想通过单击元素的索引号遍历我的选择器。

像这样：

选择一个 div 的第二个孩子(#tabby-content)

单击其他 div 的第二个子项（#tabby-labels）时。

下面解决了。但是有谁知道如何“清理代码”并以更好的方式实现相同的目标？

$("#tabby-labels > .first").click(function() {
        $("#tabby-content > .first").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .first").addClass('active').removeClass('inactive');
});

$("#tabby-labels > .second").click(function() {
        $("#tabby-content > .second").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .second").addClass('active').removeClass('inactive');
});
    $("#tabby-labels > .third").click(function() {
        $("#tabby-content > .third").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .third").addClass('active').removeClass('inactive');
});
    $("#tabby-labels > .fourth").click(function() {
        $("#tabby-content > .fourth").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .fourth").addClass('active').removeClass('inactive');
});

谢谢！

Answer 1

我认为这会做到：

$("#tabby-label > *").click(function() {
    var index = $(this).index();
    $("#tabby-contents").children('.active').toggleClass("active inactive");
    $("#tabby-contents").children().eq(index).addClass("active").removeClass("inactive");
});

它假定相关元素是两个 DIV 的唯一直接子元素。