2

我正在为学校制作一个标签菜单。但我正在为我的 Jquery 苦苦挣扎。我对菜单的想法是打开一个选项卡并让文本块推出工作正常但是当我想打开另一个选项卡时它会在我按下它后立即恢复。因为 tab1 是唯一有效的，我只是不知道如何修复它。如果有人可以提供帮助，我将不胜感激。问题出在这个 J-query 块中。

我的 jsfiddle：http: //jsfiddle.net/6dwvs/embedded/result/

$('#tab4, #tab3, #tab2,').click(function() {
    $('#tab4, #tab3, #tab2, #tab1').animate({
        height: '100px',
     }, 0, function() {
        // Animation complete.

    });
    $('#textblok1,#textblok2,#textblok3,#textblok4').animate({
        height: '0px',
    }, 0, function() {
        // Animation complete.
    });
});
});
4

2 回答 2

0

首先，这是在脚本的末尾，因此说完之后，文本块关闭了。 

$('#textblok1,#textblok2,#textblok3,#textblok4').animate({
    height: '0px',
}, 0, function() {
    // Animation complete.
});

点击tab1时没有发生的原因是因为上面的动画没有绑定到tab1

$('#tab4, #tab3, #tab2, *MISSING TAB1* ').click(function() {
于 2012-11-02T18:23:07.730 回答
0

这是你需要的吗？

演示在这里：http: //jsfiddle.net/6dwvs/19/

我将点击绑定到类而不是 ID。看看它对你是否有意义。

JS

$(document).ready(function() {
    $('.tabs').each(function(index) {
        $(this).click(function(event){
            $('.tabs').css('height','100px');
            $('.blocks').css('height','0px');
            $(this).animate({height: '110px'}, 200);
            $('.blocks').eq(index).animate({height: '500px'}, 2500);
        });
    });
});​

编辑：稍微修改了JS+解释如下：

选项卡和块的数量相同。所以我将第一个标签绑定到第一个块.eq(index)。对于特定的选项卡索引，相同的索引是动画的。

如果 index = 0，.eq(index)则针对所选元素列表中的第一个元素，对于 index = 1，第二个元素等等...

于 2012-11-02T18:41:38.130 回答