Javascript在三个隐藏的div之间切换 [英] Javascript toggle between three hidden divs

问题描述

嘿，所有，
新手在这里，所以请原谅我的方法和细节。我非常感谢您的帮助！

Hey all, Newbie here, so please forgive my approach and specifics. I'd appreciate some help!

我在一个图片库工作，有三个部分，其中只有一个将一次可见。在页面顶部有三个链接，我要切换其中一个显示，同时隐藏其他两个。

I'm working on an image gallery that's got three sections, of which only one will be visible at a time. At the top of the page there are three links that I want to toggle one of the three sections to show while hiding the other two.

我写的代码是差，只能从链接1到链接2到链接3，但不向后或从链接1到3，3到1等。

The code I've written is poor and works only from Link 1 to Link 2 to Link 3, but not backwards or from link 1 to 3, 3 to 1, etc.

感谢您的帮助和建议！

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：

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);
        });
    });

推荐答案

这里的问题是你正在硬编码哪个元素需要淡出。

The problem here is that you are hardcoding which element needs to be faded out. It would be better to select this dynamically.

首先，您应该为 #show - 链接添加一个类和您的 div 。也许 showlink 和节将是一个好的类名。然后，您可以使用jQuery的 ：visible 选择器找到当前可见的 div 。

First, you should add a class to your #show- links and to your divs. Perhaps showlink and section would be a good class names. You can then use jQuery's :visible selector to find the currently visible div.

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

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

This should then work for all your links and divs.

这篇关于Javascript在三个隐藏的div之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！