Question

我正在尝试使用Jquery选项卡在页面内导航。它工作正常。但我想在每个标签内容中添加一个子标签内容。像这样

1st Tabs nav li：

内容1 - 内容2 - 内容3 - 内容4

第二个选项卡导航（例如，在内容1中）

Sub Content 1 part 1 - Sub Content 1 part 2 - Sub Content 1 part 3

我正在使用这个JS，它完全适用于我的第一级标签：

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#nav li').click(function() {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('#tab-content div:eq(' + indexer + ')').fadeIn(0); //uses whatever index the link has to open the corresponding box 
});

使用JScript和Css添加子级别时，任何东西都不再有效......

这里有一个jsfiddle解释我正在努力实现的目标...... http://jsfiddle.net/R85tE/224/ 我在代码中找不到问题...

任何人都可以帮我这个吗？

非常感谢你的帮助！

Answer 1

问题在于单击li元素时选择div。

相反，我们应该使用jQuery子选择器来选择预期的div元素。

Content1子菜单的另一个问题是他们的父代被您的代码隐藏了。我正在使用以下代码显示它们

$('#tab-content_2 > div:eq(' + indexer + ')').parent().show().end().fadeIn(0);

隐藏的父级可见后，我正在应用你的fadeIn方法来显示实际的div元素。

* 有关jQuery子选择器的更多信息：* http://api.jquery.com/child-selector

http://jsfiddle.net/R85tE/227/

的工作演示

Answer 2

根本问题是，你在JS中有这行代码：

$('#tab-content div').hide();

但是你有多个儿童div 和孙子divs 。所以上面的那行基本上隐藏了所有的孩子，包括页面加载时的#tab-content_2，因为它是孙子。因此，您的代码在某种程度上正在发挥作用，但由于隐藏了#tab-content_2，您无法看到它正常工作。

要解决此问题，您需要定位直接子项：

$('#tab-content > div').hide();

您必须在JS中添加大于符号>，无论您在哪里定位 divs 。类似的东西：

$('#x > div').hide() or .show();

您可以在此处查看解决方案，但我建议您阅读下面的评论并希望改进手头的JS

http://jsfiddle.net/hwQ76/

此解决方案将解决手头的问题，但我建议您向直接子div，tab-content和孙子div sub-tab-content添加一些类，这样您就可以轻松定位每个组。此外，您可以进一步将代码缩减为函数，以便可以反复使用它。

jQuery选项卡有2个级别

2 个答案: