Question

嘿所有，新手在这里，所以请原谅我的方法和具体细节。我很感激一些帮助！

我正在制作一个图像库，它有三个部分，其中一次只能看到一个部分。在页面的顶部有三个链接，我想切换显示的三个部分之一，同时隐藏其他两个部分。

我写的代码很差，只能从Link 1到Link 2到Link 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 s。

Answer 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/

Answer 3

这是一种通用的方式。分组和识别代表画廊的所有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
});

祝你好运！

Answer 4

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

当点击任何一个anchers时，这将读取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;
}

Answer 5

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

的内容

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

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

Answer 6

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

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

你可能不得不吝啬实际的追加和淡化，但理论上它应该有效。

-Cheers！

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

7 个答案:

标记

的jQuery