Содержимое вкладки отображается неправильно

Question

Я пытаюсь создать простую вкладку. Я не могу понять, что я делаю неправильно здесь. Мне нужна помощь в отладке этого. Вот мой JS. Содержимое не отображается правильно.

jQuery('.containers .tabs li:first-child a').addClass('active'); 
jQuery('.containers').each(function() { 
    jQuery(this).find('.container:first').addClass('active'); 
}); 
var forClick = jQuery('.containers .tabs li a'); 
jQuery(forClick).click(function() { 
    var title = jQuery(this).attr('class'); 
    var parent = jQuery(this).closest('.containers'); 
    parent.find('.active').removeClass('active'); 
    jQuery(this).addClass('active'); 
    parent.find('.' + title + 'Content').addClass('active'); 
}); 

if (jQuery(forClick).is(':empty')) { 
    jQuery('.containers').css('display', 'none'); 
} 

Вот моя скрипка http://jsfiddle.net/sghoush1/4sEMw/2/

Примечание: Подключаемые модули не могут быть использованы, например, как JQuery UI и т.д.

Answer 1

У вас есть несколько вопросов:

• var title = jQuery(this).attr('class'); с последующим parent.find('.' + title + 'Content').addClass('active');

Когда кнопка активна, атрибут класса заканчивается время "tab1 active", что, когда вы пытаетесь использовать его в качестве результатов селекторных в ".tab1 activeContent"

Чтобы обратиться к этому, вы могли бы поставить что-то вроде if (jQuery(this).hasClass('active')) return; в вашем случае щелчка.

• <div class="container tab1Content" id="product2_nw">

Вы назначены неправильный tabContent класс вашего второго контейнера.

Все, что называется: Зачем создавать свои собственные? Я бы рекомендовал использовать существующий плагин табуляции, такой как jQuery UI's.