1

この jQuery は、多数の隠しボックス アニメーション、fadeOuts、fadeIns などを実行します...

ここに動作するjsfiddleがあります

http://jsfiddle.net/xpancom/FNF3z/

左側にサンプル リンクが表示され、それぞれ 3 つの非表示のボックスが表示されます。別のリンクをクリックすると、それらの 3 つが非表示になり、3 つの異なるリンクが表示されます。

これは単なるサンプルです。私のページのいくつかには、3 つの隠しボックスが 10 セットあります... jQuery は、これらすべてを実行するのに 300 行を超えています。

現在、私はこのようなIDとのリンクを持っています

<li><a href="#" id="click1-12">Sample 1</a></li>
<li><a href="#" id="click1-13">Sample 2</a></li>

そして、アニメーション化されたフェードインとアウト、およびリンクのアクティブな状態を実行する jQuery

    $("#click1-12").click(function() {
    $("#work-uscg1 a").removeClass("work-active");
    $.fn.closeBoxes();
    $('#work-uscg1').delay(400).fadeIn();
    $('#work-uscg2').delay(600).fadeIn();
    $('#work-uscg3').delay(800).fadeIn();
    $('#work-uscg3a').delay(400).fadeIn();
    $("#click1-12").addClass("nav-active");
    $("#click2-11a").addClass("work-active");
});
$("#click1-13").click(function() {
    $("#work-toy1 a").removeClass("work-active");
    $.fn.closeBoxes();
    $('#work-toy1').delay(400).fadeIn();
    $('#work-toy2').delay(600).fadeIn();
    $('#work-toy3').delay(800).fadeIn();
    $('#work-toy3a').delay(400).fadeIn();
    $("#click1-13").addClass("nav-active");
    $("#click3-11a").addClass("work-active");
});

よりエレガントなソリューションを作成する方法についてのアドバイスをありがとう。

4

1 に答える 1

1

ここでは、一般的なアイデアのみを示しますが、実際のコンテンツと比較して各リスト項目のインデックスを利用することは、おそらく良い賭けです。一般的なマークアップを次に示します。

<div id="nav">
    <ul>
        <li><a href="#">Sample 1</a></li>
        <li><a href="#">Sample 2</a></li>
        <li><a href="#">Sample 3</a></li>
    </ul>
</div>

<div id="content">
    <div class="item">
        <div class="block-1">content 1-1</div>
        <div class="block-2">content 1-2</div>
        <div class="block-3">content 1-3</div>
    </div>

    <div class="item">
        <div class="block-1">content 2-1</div>
        <div class="block-2">content 2-2</div>
        <div class="block-3">content 2-3</div>
    </div>

    <div class="item">
        <div class="block-1">content 3-1</div>
        <div class="block-2">content 3-2</div>
        <div class="block-3">content 3-3</div>
    </div>
</div>

そして、最初はcssで要素を隠しました：

.item div {
    display: none;
}

さて、楽しい部分は... JavaScriptです！まあ、jQuery ですが、あなたは私のドリフトを取得します。基本的に、影響を与えたい各要素を 1 つの関数で制御できるようにする必要があります。だから、私が言ったように、クリックされた要素のインデックスを利用して、実際のコンテンツのステータスを変更しました。

var navClick = function() {
    var arrPosition = $(this).closest('li').index();
    var $targetDiv = $('#content').find('.item').eq(arrPosition);
    $targetDiv.find('.block-1').delay(400).fadeToggle();
    $targetDiv.find('.block-2').delay(600).fadeToggle();
    $targetDiv.find('.block-3').delay(800).fadeToggle();
}

$('#nav a').on('click', navClick);

マークアップ全体は、使用していた JS とともに、いくつかのクリーニングを使用できます。私の方法では、各要素に特定の ID を指定する必要さえありません。ご不明な点がございましたら、お気軽にお問い合わせください。

ああ、ここにフィドルがあります。http://jsfiddle.net/cArA3/1/

于 2013-02-05T05:32:12.880 に答える