2

学校用のタブメニューを作っています。しかし、私はJqueryに苦労しています。メニューの私の考えは、タブを開いてテキストブロックをロールアウトさせることでしたが、他のタブを開こうとすると、それを押すとすぐに元に戻ります。tab1 が機能する唯一のものであるため、修正方法がわかりません。誰かが助けてくれれば本当にありがたいです。問題は、J クエリのこのブロックにあります。

私の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

これはあなたが必要とするものですか？

デモはこちら: 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);
        });
    });
});​

EDIT：JSをわずかに変更+説明を次のように：

タブとブロックの数は同じです。そこで、最初のタブを で最初のブロックに結び付けました.eq(index)。タブの特定のインデックスでは、同じインデックスがアニメーション化されます。

インデックス = 0 の場合、選択された要素のリストから最初の.eq(index)要素をターゲットにし、インデックス = 1 の場合、 2 番目の要素など...

于 2012-11-02T18:41:38.130 に答える
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 に答える