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

【问题标题】：Javascript toggle between three hidden divsJavascript 在三个隐藏的 div 之间切换
【发布时间】：2011-01-09 22:20:56
【问题描述】：

大家好，新手在这里，所以请原谅我的方法和细节。我将不胜感激！

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

我写的代码很差，只能从链接 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);
        });
    });

【问题讨论】：

标签： javascript jquery css toggle hidden

【解决方案1】：

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

首先，您应该向#show- 链接和divs 添加一个类。也许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);
    });
});

这应该适用于您的所有链接和divs。

【讨论】：

【解决方案2】：

$(function() {
    $("#content p a").click(function() {
        var selector = this.id.substring(this.id.indexOf("_") + 1);
        $("#" + selector).fadeIn().siblings("div").fadeOut();
    });
});

http://jsfiddle.net/rfvgyhn/UdRrd/

【讨论】：

尝试添加队列/延迟淡入/淡出让这更流畅！但肯定是好的解决方案。

【解决方案3】：

jsfiddle 上的工作示例：http://jsfiddle.net/Damien_at_SF/umcG2/

当任何锚点被点击时，这将读取它的 HTML 并将其用作要显示的新 div 的 ID。当前 div 有一个名为 current 的类，一旦淡入淡出效果完成，它将被换出。这样，您可以使用$('.current') 解决您的淡出问题，您可以使用$('#'+id) 解决您想要淡入的div ...

希望这会有所帮助:)

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" class="current">
        <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>

JS：

$('p a').click(function(){

    var id = $(this).html().toLowerCase();

    $('.current').fadeOut(600, function(){
        $('#'+id).fadeIn(600);
        $('.current').removeClass('current');
        $('#'+id).addClass('current');

    });

});

CSS：

#studio {
    display:none;
}
#live {
    display:none;
}

【讨论】：

【解决方案4】：

有一种通用的方法可以做到这一点。对代表画廊的所有 div 进行分组和识别非常重要。然后，您需要找到一种方法来通知链接它们必须显示哪些画廊：

HTML：

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

JS：

$("#links a").click(function() { // for every link in #links
    $("#galleries .gallery:not(#" + $(this).attr("gallery") + ".gallery)").slideUp(); // hide ALL galleries
    $("#galleries #" + $(this).attr("gallery") + ".gallery").slideDown() // show the gallery associated to this link
});

祝你好运！

【讨论】：

【解决方案5】：

请记住，对于您的每一个 div，您都需要淡出其他的 both。因此，为了清楚起见，在伪代码中，您需要类似

 $('#show_live").click(function(){
     // fade out "studio"
     // fade out "promo"
     // fade IN "live"
  });

我相信有一种方法可以让 jQuery 同时淡化两个 div，但我不记得它了。

【讨论】：

我认为这与这个问题无关，但是一个元素上的动画不会阻止另一个元素上的动画。

【解决方案6】：

更好的方法是使用泛型类，因此您不必单独处理每个容器，并且可以添加新容器，而无需在以后重新编写代码。

【讨论】：

【解决方案7】：

对于这样的事情，我通常做的是隐藏所有容器，然后将它们附加到包含可见内容的显示 div。

标记

<a href="#" rel="one" class="view-port-trigger">Panel One</a>
<a href="#" rel="two" class="view-port-trigger">Panel Two</a>
<a href="#" rel="three" class="view-port-trigger">Panel Three</a>

<div class="gallery-pane" id="one"><h1>panel one</h1></div>
<div class="gallery-pane" id="two"><h1>Panel Two</h1></div>
<div class="gallery-pane" id="three"><h1>Panel Three</h1></div>
<div class="gallery-view-port"></div>

jQuery

>

var $viewPort = $(".gallery-view-port"),
    curSelection;
$(".gallery-pane").css('display', 'none');
$(".view-port-trigger").bind('click', function(index, el){
   if(curSelection !== $(this).attr('rel')){
      curSelection = $(this).attr('rel');
      markupToInject = $("#" + curSelection);
      $viewPort.children()
          .fadeTo(500, 0)
          .delay(500)
          .queue(function(n){
               //append the cloned selection in a queue
               $viewPort.append(markupToInject.clone())
           })
           .fadeTo(500, 1);
   }
});

您可能不得不对实际的附加和淡入进行忽悠，但理论上它应该可以工作。

-干杯！

【讨论】：