javascript - JQuery 淡出

Question

我有一个页面有几个(大约 30)相同大小的 div。但是 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[即 div #t1]，所有框都会淡出，除了那些具有类 .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

我的意思是我是否必须为每个 #t 单独编写 .click(function() 7 次并在编写时排除该类$(".exhibitions, .workshops, .sponsors, .hospitality, .lectures, .gallery").animate()??

此外，如何在用户点击其他选项时删除 .active 类？

Answer 1

试一试:Live Demo

你必须为所有的框指定一个公共(public)类，我使用了boxes。

它还处理“Home”，它将显示所有的 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>