索引元素及其内容

Question

我正在设置jquery选项卡，但是tabs包含其他被索引为-1的元素而不是其父DIV的索引，我怎么能相应地索引嵌套元素或如何使用event.stopPropagation();使嵌套元素引起的操作失效？

Here Is a js fiddle of the problem

$.fn.tabSample = function () {
$(this).each(function (idx, el) {
    var $this = $(this);
    $this.on('click','.tabs .tab', function (event) {
        event.stopPropagation();
        var index = $this.find(".tabs .tab").index(event.target);
        $this.find(".contents div").removeClass('active');
        $this.find(".tabs .tab").removeClass('active');
        var item = $this.find(".contents div:eq(" + index + ")").addClass('active');
        var item2 = $this.find(".tabs .tab:eq(" + index + ")").addClass('active');

        console.log(item, item2, event.target, index);
    });
});
};

$('html').click(function () {
//Hide the menus if visible
   $(".active").removeClass('active');
   var $this = $(this);
   var index2 = $this.find(".tab button").index(event.target);
   console.log(index2);
});


$(".tab-control").tabSample();