选项卡式导航。 Jquery 和 CSS 问题

Question

前面讨论过的脚本问题。 Here

基本上我的 html 并没有按照我想要的方式运行。

点击： All - 显示所有容器

<div class="slide">

动作冒险 - 展示

<div class="slide" title="Action Adventure">

戏剧 - 展示

<div class="slide" title="Drama">

等等……

已修复 在初始加载时，加载所有容器当前仅在首次加载时工作。在我单击另一种类型后，然后返回“全部”，它似乎表现得很奇怪，只显示其他

New Demo Here

这个问题仍然存在 然后，我注意到在初始加载后，单击列表，它会显示下一个容器，而不是具有相同标题和文本的容器。我认为这与 index();但我不完全确定。我需要让这该死的东西正常工作。

Demo here

谢谢大家！

ps，还有其他 jquery 可以隐藏第 n 个孩子。忽略它。

感谢大家的帮助！

我需要帮助的最后一件事是在所有第一个孩子都可见时隐藏所有第一个孩子。除了动作冒险中的第一个。

Answer 1

这里：

Working DEMO

demo with comments

在这里，我们使用被点击的li 的.index() 编号 - 打开其:eq() 等于此.index() 的TAB。

看看这个表： Before你有这个：

li index        --->    .slide index
_____________________________________

Action  | 0     --->     Action | 0 
Comedy  | 1     --->     Comedy | 1
Drama   | 2     --->     Drama  | 2
Docume. | 3     --->     Docume.| 3

每个li 都很好地打开了他各自的标签.slide。

但是你决定添加一个元素.all 来打开你所有的标签， 但现在你有了这个：

li index        --->     .slide index
_____________________________________
All     | 0  (OPEN ALL)
Action  | 1     --->     Action | 0 
Comedy  | 2     --->     Comedy | 1
Drama   | 3     --->     Drama  | 2
Docume. | 4     --->     Docume.| 3

如您所见，.all 没有打开他特定的“兄弟”标签。它只需要打开所有标签！
但是，添加这个“额外的”li 元素，您已经将其他 li 元素的索引号“移动”了 1 个。
现在点击 li Drama ，现在有了索引 3 ，它将打开具有相同索引的 TAB。但那是包含 纪录片 电影的 TAB！因为它仍然有索引号 3！

要解决这个新问题，您必须搜索具有 THIS 索引号但为 -1 的选项卡。
( 戏剧 index(3)-1 = 打开戏剧标签 index(2) )

$('ul.nav li').click(function() {

    var i = $(this).index()-1;  
    $('.slide:eq('+i+')').fadeIn(400);

});

考虑到这一点，您只需使用 jQuery :visible 选择器 .fadeOut() 所有以前打开的选项卡。例如：

$('.slide:visible').fadeOut(400);

这将防止您的脚本干扰所有其他.slide。

这是你的脚本：

$('.slide').css({position:'relative',display:'block'});

$('ul.nav li').click(function() {
    $(this).addClass('btnSelect').siblings().removeClass('btnSelect');

    if( $(this).hasClass('all') ){
        $('.slide:visible').fadeOut(400,function(){
            $('.slide').fadeIn(400);
            $('.grid ul li:nth-child(1)').show();
        });
        return;
    }

    var i = $(this).index()-1;    
    $('.slide:visible').fadeOut(400,function(){
        $('.slide:eq('+i+')').fadeIn(400);
        $('.grid ul li:nth-child(1)').hide();
    });
});

您也可以使用：$('.slide').eq(i).fadeIn(400); 看起来更漂亮！ :)

Answer 2

这并不能完全回答您的问题，但请务必在执行淡出之类的操作之前停止排队的动画：

$(".slideMove .slide").stop(true,true).fadeOut("slow");

否则，点击一个按钮几次会导致动画反复运行