1

Web アプリケーションで使用するタブ システムを開発しようとしています。タブの使い方の基本を理解しており、以前にタブ システムを機能させることができました。

ただし、今回は、従来よりも少し動作が遅くなる必要があります。まず、すべてのタブ コンテンツが非表示になっています。タブをクリックすると、タブのコンテンツが下にスライドするようにします。次に、同じタブをもう一度クリックすると、スライドして元に戻ります（したがって、すべてが再び非表示になります）。ただし、別のタブをクリックすると、そのタブのコンテンツにフェード インしたいと考えています。

一般的な外観は次のとおりです。

ユーザー インターフェイスの外観。

タブのHTMLは次のとおりです。

<div class="controls">
    <ol class="sections">
        <li><a href="#touch"><img src="assets/img/touch.png" alt="Touch"> Touch</a></li>
        <li><a href="#speak"><img src="assets/img/speak.png" alt="Speak"> Speak</a></li>
    </ol>
    <ol class="actions" id="touch">
        <li><a href="#">Search for what hatched</a></li>
        <li><a href="#">Pick up the eggshell</a></li>
    </ol>
    <ol class="actions" id="speak">
        <li><a href="#">Call for what hatched</a></li>
        <li><a href="#">Pick up the eggshell</a></li>
    </ol>
</div>

HTML はスタイリング上の理由からそのようにレイアウトされているため、可能であれば変更したくありません。「セクション」の順序付きリストはタブ用であり、各「アクション」はそのタブのタブ コンテンツです。

これは私のJavaScriptです（動作しません）：

$(document).ready(function(){
    $(".sections > li > a").click(function(){
        $("ol.actions").hide();
        if($(this).parent().hasClass("active")) {
            $($(this).attr('href')).hide();
            $(this).parent().removeClass("active");
        } else {
            $($(this).attr('href')).show();
            $(this).parent().addClass("active");
        }
        return false;
    });
});

私もこれを試しました：

$(document).ready(function(){
    $(".sections li a").click(function(){
        var target = $(this).attr('href');
        var parent = $(this).parent();

        var sections = $("ol.sections li");
        var actions = $("ol.actions");

        $(sections).removeClass("active");
        $(actions).slideUp();

        $(parent).addClass("active");
        $(target).slideDown();

        return false;
    });
});

これの正しいコードを理解するのを手伝ってくれる人はいますか? 同様のシステムの例として、jQuery UI のアコーディオン メニューが挙げられます。このメニューでは、すべてを折りたたむことができますが、一度に展開できるのは 1 つだけです。

4

3 に答える 3

1

以前似たようなものを作ったことがあります。.slideUp()および.slideDown()jQuery メソッドを使用します。

編集：

これを試してください（もう一度）。（私はいくつかのわずかな変更を加えました。以前は間違いなく壊れていました。）

$(document).ready(function(){
    $(".sections li a").click(function(){
        var target = $(this).attr('href');
        var $parent = $(this).parent();

        var $sections = $("ol.sections li");
        var $actions = $("ol.actions");

        if( !$parent.hasClass('active') ){
            $sections.removeClass("active");
            $actions.slideUp();

            $parent.addClass("active");
            $(target).slideDown();
        } else {
            $sections.removeClass("active");
            $actions.slideUp();
        }

        return false;
    });
});
于 2013-07-28T13:12:58.710 に答える