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。

它还处理“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>
于 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 -->

为了缩短您的 JS，您可以使用fadeIn()和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 回答