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

时间:2011-01-09 22:20:56

标签: javascript jquery css toggle hidden

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

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

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

7 个答案:

答案 0 :(得分:4)

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

首先,您应该为#show-链接和div添加一个类。也许showlinksection可能是一个好的类名。然后,您可以使用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。

答案 1 :(得分:1)

$(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/

答案 2 :(得分:1)

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

答案 3 :(得分:1)

关于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;
}

答案 4 :(得分:0)

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

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

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

我通常为这样的东西做的是隐藏所有容器,然后将它们附加到包含可见内容的显示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!