Javascript 在三个隐藏的 div 之间切换

Question

大家好， 新手在这里，所以请原谅我的方法和细节。我会很感激一些帮助!

我正在制作一个包含三个部分的图片库，一次只能显示其中一个部分。在页面的顶部有三个链接，我想切换三个部分中的一个以显示，同时隐藏另外两个。

我写的代码很差，只能从链接 1 到链接 2 再到链接 3，但不能反向或从链接 1 到 3、3 到 1 等。

感谢您的帮助和建议!

HTML:

<div id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left"><a id="show_promo">PROMO</a> <a id="show_studio">STUDIO</a> <a id="show_live">LIVE</a></p>
    <div id="promo">
        <p align="center">PROMO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="studio">
        <p align="center">STUDIO</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
    <div id="live">
        <p align="center">LIVE</p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
        <p align="center">
            <img src="#" />
            <img src="#" />
            <img src="#" />
            <img src="#" />
        </p>
    </div>
</div>

Javascript:

$('#studio').css('display', 'none');
    $('#live').css('display', 'none');
    $('#show_studio').click(function(){
        $('#promo').fadeOut(600, function(){
            $('#studio').fadeIn(600);
        });
    });
    $('#show_live').click(function(){
        $('#studio').fadeOut(600, function(){
            $('#live').fadeIn(600);
        });
    });
    $('#show_promo').click(function(){
        $('#live').fadeOut(600, function(){
            $('#promo').fadeIn(600);
        });
    });

Answer 1

这里的问题是您正在对需要淡出的元素进行硬编码。最好动态选择。

首先，您应该向您的#show- 链接和您的div 添加一个类。或许 showlink 和 section 会是一个很好的类名。然后您可以使用 jQuery 的 :visible selector找到当前可见的 div。

$('a.showlink').click(function(){
    var toShow = this.id.substr(5);
    $('div.section:visible').fadeOut(600, function(){
        $('#' + toShow).fadeIn(600);
    });
});

这应该适用于所有链接和 div。