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。

选项卡的内容显示不正确

1 个答案: