0

30同じサイズのがいくつか (約 ) あるページがありますdivs。ただし、次のclassように異なります。

.mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures {
    background:rgba(0, 0, 0, .30);
    float:left;
    position:relative;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
}

次に、次のnaviようなクラスがあります。

<div id="navi">
    <a href="#"><div id="t0" class="n0 lfloat"><img src="images/home.png"><span>Home</span></div></a>
    <a href="#"><div id="t1" class="n1 lfloat"><img src="images/events.png"><span>Events</span></div></a>
    <a href="#"><div id="t2" class="n2 lfloat"><img src="images/workshops.png"><span>Workshops</span></div></a>
    <a href="#"><div id="t3" class="n3 lfloat"><img src="images/lectures.png"><span>Lectures</span></div></a>
    <a href="#"><div id="t4" class="n4 lfloat"><img src="images/exhibitions.png"><span>Exhibitions</span></div></a>
    <a href="#"><div id="t5" class="n5 lfloat"><img src="images/hospitality.png"><span>Hospitality</span></div></a>
    <a href="#"><div id="t6" class="n6 lfloat"><img src="images/gallery.png"><span>Gallery</span></div></a>
    <a href="#"><div id="t7" class="n7 lfloat"><img src="images/sponsors.png"><span>Sponsors</span></div></a>
</div>

私の目的は、ユーザーがEvents[ie, div #t1] をクリックすると、 class を持つボックスを除くすべてのボックスがフェードアウトすること.eventsです。同様に、他のオプションについても同様です。これに使っJqueryています。しかし、コードが長すぎます。短くする方法はありますか?

    <script type="text/javascript">
    $(function () {
    $('a #t0').click(function() {
        $("*").animate({ 
            opacity: 1.0
            }, 500 );

        });

    $('a #t1').click(function() {
        $("#t1").toggleClass("active");
        $(".exhibitions, .workshops, .sponsors, .hospitality, .lectures, .gallery").animate({ 
            opacity: 0.0
            }, 500 );
        $(".events").animate({ 
            opacity: 1.0
            }, 500 );

        });
</script>

#t2、#t3、などについて#t4も同様です。コードを短くする方法はありますか?

編集＃1

.click(function() 7つまり、それぞれの時間を個別に記述し、記述#tするときにそのクラスを除外する必要があります$(".exhibitions, .workshops, .sponsors, .hospitality, .lectures, .gallery").animate()か??

また、.activeユーザーが他のオプションをクリックしたときにクラスを削除する方法は?

4

3 に答える 3

4

これを試してみてください:ライブデモ

すべてのボックスに共通のクラスを指定する必要がありますboxes。

また、すべての div を表示する「ホーム」も処理します。クリックされたdivクラスを に設定しますactive。

<script type="text/javascript">
    $(function () {
        $('a #t0').click(function() {
            $(".boxes").animate({ 
                opacity: 1.0
                }, 500 );

        });


        $("#navi a").click(function() {
            c = $(this).text().toLowerCase();

            if(c != "home") {
                $('.' + c).animate({ 
                   opacity: 1.0
                 }, 500 );
                $('.boxes').not('.' + c).animate({ 
                   opacity: 0.0
                 }, 500 );

                $(".active").removeClass('active');
                d = $(this).find('div')[0];
                $(d).addClass('active');
            }
        });
    });
</script>
于 2013-01-05T07:47:05.890 に答える
0

まず、ロードするセクションを簡単に識別できるように、メイン メニューにいくつかのより良い識別子を作成します。

<a href="#" id="home">....</a>
<a href="#" id="events">....</a>
<!-- etc -->

あなたの質問からは、コンテンツ部門がどのように見えるかは実際にはわかりません。したがって、それらが次のようになっていると仮定しましょう (contentクラスを使用して、選択されていないコンテンツをフェードアウトします)。

<div class="home content">...</div>
<div class="events content">...</div>
<!-- etc -->

フェードfadeIn()やクラス管理に使用できる JS を短縮するには、すべてのリンクに割り当てることができるため、必要なイベント リスナーは 1 つだけです。fadeOut()addClass()removeClass()click

$('#navi a').click(function() {

    // only run if clicked anchor is not active
    if (! $(this).hasClass('active')) 
    {
        // active class management
        $('#navi a').removeClass('active'); // remove class from all anchors
        $(this).addClass('active');         // add class to selected anchor

        // fade out / fade in required content
        var showContentByClass = '.' + $(this).attr('id');
        $('.content').not(showContentByClass).fadeOut('slow');
        $(showContentByClass).fadeIn('slow');
    }
});

上記の例では、選択したオプションが現在表示されているコンテンツではないことを確認するチェックも追加しました。

于 2013-01-05T07:44:24.910 に答える
0

jQueryfadeOutとfadeIn関数を使用してみて、クラスを持たない要素を見つけるには、eventsセレクターではなく CSS を使用します。not(.events)

于 2013-01-05T07:45:42.317 に答える