Селектор перемещения, по номеру числа щелкнутого элемента

Question

Я хочу пересечь мой селектор по номеру числа щелкнутого элемента.

Как это:

выберите второго ребенок одного сНу (# полосатых-контента)

когда нажав второй ребенка другой Дивых (# таббов-метки).

Решено ниже. Но кто-нибудь знает, как «очистить код» и достичь того же, но лучше?

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

Предполагается, что соответствующие элементы являются единственными прямыми потомками двух DIVs.