选项卡式导航。 Jquery和CSS问题 [英] Tabbed navigation. Jquery and CSS issues

问题描述

前面讨论的脚本问题。
此处

Issues with a script earlier discussed. Here

基本上我的html表现不像我想要的那样。

Basically my html is not behaving the way i want it to.

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

Clicking: All - Display all containers

<div class="slide">

动作冒险 - 显示

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

戏剧 - 显示

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

依此类推......

And so on...

已修复
在初始加载时，仅加载所有容器当前仅在首次加载时有效。点击anather流派后，再回到'All'，它似乎表现得只是显示其他所有

新演示

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

This issue remains Then, i noticed that after initial load, clicking down the list, it is displaying the next container down instead of the one with identical title and text. I think it has to do with the index(); but im not entirely sure. I need to get this dang thing working right.

在这里演示

谢谢大家！

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

ps, there is other jquery to hide the the nth-child. just ignore it.

感谢您的帮助！

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

One last thing I need assistance with is hide all the first-child ul's when all are visible. Except the very first one under Action-adventure.

推荐答案

这里：

带评论的演示

此处我们使用 .index（）点击 li 的数量 - 打开一个：eq（）等于此 .index（）。

Here we are using the .index() number of a clicked li - to open a TAB whose :eq() equals this .index().

看看这个表：
之前你有这个：

Look at this tables: Before you had this:

li index        --->    .slide index
_____________________________________

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

并且每个 li 开启得很好相应的标签 .slide 。

And each li was opening nicely his respective tab .slide.

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

But than you decided to add an element .all that will open ALL your tabs, But now you have this:

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 元素你已经移动了另一个<$的索引号c $ c> li elemnts by 1 up。

现在点击 li 剧情，现在索引 3 它将打开具有相同索引的TAB。但那是包含纪录片电影的TAB！因为它仍然有索引号 3 ！

As you can see .all has not his specific 'brother' tab to open. It just has to OPEN ALL TABS!
But, adding this 'extra' li element you have 'moved' the index numbers of the other li elemnts by 1 up.
Now clicking the li Drama , having now the index 3 it will open the TAB that has the same index. But that's the TAB containing Documentary movies! as it still has the index number 3!

要解决这个新问题，你必须搜索具有该索引号的选项卡但是 - 1.

（戏剧索引（3）-1 =打开剧情标签索引（2））

To fix that new issue you have to search for a tab that has THIS index number but -1.
( Drama index(3)-1 = open Drama tab index(2) )

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

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

});

考虑到这一点，你只需要 .fadeOut（）使用jQuery ：visible 选择器的所有先前打开的选项卡。例如：

Having that in mind you just have to .fadeOut() all previously opened tabs using the jQuery :visible selector. Ex:

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

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

That will prevent interfering your script with all other .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）; 看起来更漂亮！ ：）

You can use also: $('.slide').eq(i).fadeIn(400); looks prettier! :)

这篇关于选项卡式导航。 Jquery和CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！