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

前面讨论过的脚本问题。Here https://stackoverflow.com/questions/7169724/jquery-to-detect-identical-class-and-text-for-tab-navi

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

点击： 全部 - 显示所有容器

<div class="slide">

动作冒险 - 显示

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

戏剧 - 显示

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

等等...

FIXED 在初始加载时，加载所有容器当前仅在首次加载时起作用。单击另一种流派后，然后返回“全部”，它似乎表现得很奇怪，只显示所有其他流派

新演示在这里 http://jsfiddle.net/arkjoseph/3FrDY/2/

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

演示在这里 http://jsfiddle.net/arkjoseph/3FrDY/1/

多谢你们！

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

感谢您的帮助！

我需要帮助的最后一件事是当所有第一个子 ul 都可见时隐藏所有第一个子 ul。除了动作冒险类的第一个之外。

Here:

工作演示 http://jsfiddle.net/roXon/P3z6x/2/

带评论的演示 http://jsfiddle.net/roXon/P3z6x/3/

这里我们使用的是.index()点击次数li- 打开一个TAB:eq()等于这个.index().

看看这个表：Before https://stackoverflow.com/questions/7183480/jquery-text-compare-to-title-in-ie7/7183644#7183644你有这个：

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记录电影！因为它仍然有索引号3!

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

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

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

});

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

$('.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);看起来更漂亮了！ :)