Javascript-Umschalten zwischen den drei versteckten divs

Hey alle,
Neuling hier, also bitte verzeihen Sie meine Herangehensweise und Besonderheiten. Ich würde schätzen etwas Hilfe!

Ich arbeite an einer Bildergalerie, die hat drei Abschnitte, von denen nur eine sichtbar sein wird in einer Zeit. An der Spitze der Seite gibt es drei links, die ich wollen, schalten Sie einen der drei Abschnitte zu zeigen, während versteckt die anderen beiden.

Den code, den ich geschrieben habe, ist schlecht und funktioniert nur von Link 1 zu Link 2 Link 3, nicht aber nach hinten oder von Links 1 zu 3, 3 zu 1, etc.

Dank für Eure Hilfe und Ratschläge!

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

InformationsquelleAutor technopeasant | 2011-01-09

4

Das problem hier ist, dass Sie hardcoding welches element muss ausgeblendet werden. Es wäre besser, wählen Sie diese dynamisch.

Zunächst sollten Sie eine Klasse hinzufügen, um Ihre #show- links und auf Ihre divs. Vielleicht showlink und section wäre eine gute Klasse Namen. Sie können dann verwenden die jQuery - :visible - Selektor zu finden, die aktuell sichtbaren div.
```
$('a.showlink').click(function(){
    var toShow = this.id.substr(5);
    $('div.section:visible').fadeOut(600, function(){
        $('#' + toShow).fadeIn(600);
    });
});
```
Dieser sollte dann die Arbeit für alle Ihre links und divs.
- sauber und einfach! vielen Dank für Ihre Zeit.
InformationsquelleAutor lonesomeday

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

versuchen Sie, ein queue/delay fade in/out machen diese geschmeidiger! aber gute Lösung für Sie sicher.

InformationsquelleAutor Chris

Beispiel auf jsfiddle: http://jsfiddle.net/Damien_at_SF/umcG2/

Wenn die anchers geklickt wird dies Lesen, ich ' TS HTML und nutzen es als ID des neuen div zu zeigen. Die aktuelle div-Element hat eine Klasse namens current werden ausgetauscht, sobald der fade-Effekte sind abgeschlossen. Auf diese Weise können Sie die Adresse Ihres fade-out mit $('.current') und Sie können die Adressen für die div, die Sie möchten, zu verblassen, in mit $('#'+id)...

Hoffe, das hilft 🙂

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

InformationsquelleAutor Damien-Wright

Gibt es eine Allgemeine Möglichkeit, todo dies. Es ist wichtig, dass Sie die Gruppe und identfy alle divs, die für eine Galerie. Dann müssen Sie einen Weg finden, zu informieren, die links, die Galerie, die Sie haben zu zeigen:

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

Glück!

Diese Lösung wird funktionieren, wenn Sie nicht möchten, dass die animation.
ja, warum nicht? aktualisiert mit animation

InformationsquelleAutor Gonzalo Larralde

0

Denken Sie daran, dass für alle divs, müssen Sie die fade-out - beide von den anderen. Also in pseudocode, der für Klarheit, Sie wollen so etwas wie
```
 $('#show_live").click(function(){
     //fade out "studio"
     //fade out "promo"
     //fade IN "live"
  });
```
Ich glaube, es gibt eine Möglichkeit jQuery fade zwei divs gleichzeitig, aber ich erinnere mich nicht, es beiläufig.
- Es ist irrelevant für diese Frage, denke ich, aber eine animation auf ein element wird nicht blockiert die animation auf einem anderen.
- Danke, ich wusste gar nicht erinnern.
InformationsquelleAutor Charlie Martin
0

Der bessere Ansatz wäre die Verwendung einer generischen Klasse, so dass Sie nicht haben, um die Adresse der jeweiligen container getrennt und können neue hinzufügen, mit hin den code so umschreiben, zu einem späteren Zeitpunkt.

InformationsquelleAutor The Surrican

Was ich in der Regel nicht für Sachen wie das verstecken, all die Behälter und fügen Sie eine display-div enthält den sichtbaren Inhalt.

Markup

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

Haben Sie vielleicht, zu schummeln, um mit dem eigentlichen Anhängen und verblassen in, aber in der Theorie sollte es funktionieren.

-Prost!

InformationsquelleAutor Derek Adair

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.