jquery toggle zwischen divs und anschließend verstecken aktiven div

einem Spiel auf eine ähnliche Frage von mir wurde freundlich beantwortet.

drei divs versteckt. jquery schaltet zwischen Ihnen über verschiedene links. dies funktioniert hervorragend! nun, ich möchte, clink den link der entsprechenden aktiven div ein und ausblenden, esentially das gleiche wie beim laden der Seite mit allen von Ihnen versteckt. jetzt rückt es aus und wieder an.

Hilfe! danke!

HTML:

 <div id="nav">
    <a class="home" id="show_about" title="About">ABOUT</a><br />
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
    <a class="home" id="show_contact" title="Contact">CONTACT</a>
 </div>
 <div id="content">
    <div class="current" id="about">
        <p>ABOUT's content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE's content</p>
    </div>
    <div id="contact">
        <p>CONTACT's content</p> 
    </div>
</div>

Javascript:

    $(function(){
        $('#about').css('display', 'none');
        $('#subscribe').css('display', 'none');
        $('#contact').css('display', 'none');
    });
    $('.home').click(function(){   
        var id = $(this).html().toLowerCase();
        $('.current').fadeOut(600, function(){
            $('#'+id).fadeIn(600);
            $('.current').removeClass('current');
            $('#'+id).addClass('current');     
        });   
    });

InformationsquelleAutor technopeasant | 2011-02-26

1

Ausprobieren..

Seit fadeOut auf die aktuelle Klasse wird entfernt, wenn die Größe des Stromes ist 0 bedeutet, dass nichts ausgewählt ist. Wir können einfach fadeIn der Inhalt div.
```
$('#about, #subscribe, #contact').hide();

$('.home').click(function() {
    var id = $(this).html().toLowerCase();
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function(){showContent($content)});
    }
});

function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
```
Beispiel auf jsfiddle.
- Ich denke, ich sollte hinzufügen, in einer kleinen, beweglichen X-Taste, um das Fenster zu schließen. Die besten arbeiten, die Funktion in dieser Funktion, oder eine ganz andere? #in der Nähe ist die ID
- So dass Sie wollen, fügen Sie einen schließen-link in der Inhalts-div? Ich würde es in einer anderen Funktion. Da jetzt die Startseite klicken, ist der Umgang mit Ihrer Menü - /content-Anzeige. Wenn Sie arbeiten in einem close-Funktion kann es vorkommen, dass eine Methode, die dadurch viel.
- Super, danke für die Richtung. wenn ich verstehen Sie Ihre Funktion richtig.. es bewegt sich die class="current" den angezeigten div. könnte ich dann eine einfache Klick-Funktion, die fades aus den class="current" - div?
- Ja, die sollten die Arbeit für Ihre Bedürfnisse. Froh, dass ich konnte ein wenig helfen.
- gebaut in der jsFiddle Sie geschickt.. Funktion nicht funktioniert, basierend auf die class="aktuell". irgendwelche Ideen? sorry zu nehmen, bis all Ihre Zeit! jsfiddle.net/CZXqz/2
- Keine Sorge, das problem war, Sie hatte mehrere ID ' s in der Nähe eine ID muss eindeutig sein, um den dom. Ich angepasst, um die Verwendung einer Klasse von in der Nähe statt und scheint sich korrekt Verhalten. jsfiddle.net/markcoleman/CZXqz/3
- Schön!
InformationsquelleAutor Mark Coleman

Hier ist ein weiterer Ansatz:

$(function(){
        $('#content div').hide();
    });

    $('.home').click(function(){
        var targetSelector = '#' + $(this).attr('title').toLowerCase();
        var targetShown = $(targetSelector).is(':visible');

        if (targetShown) {
            $(targetSelector).fadeOut(600);
        } else {
            $('#content div:not(' + targetSelector + ')').fadeOut(600,
                                      function() {$(targetSelector).fadeIn(600)});
        }
    });

InformationsquelleAutor Mike C

Überprüfen, um zu sehen, ob die id des angeklickten Elements ist gleich der id des Elements, die derzeit angezeigt werden (d.h. das element mit der aktuellen Klasse). Wenn Sie ein anderes element, dann ist eine swap-stattfinden muss. Wenn es das gleiche element ist, dann muss es versteckt werden und seine aktuellen Klasse entfernt...

(Edit: fixed-code)

HTML:

<div id="nav">
    <a class="home" id="show_about" title="About">ABOUT</a><br />
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
    <a class="home" id="show_contact" title="Contact">CONTACT</a>
 </div>
<br />
<br />
<br />
 <div id="content">
    <div id="about">
        <p>ABOUT's content</p>
    </div>
    <div id="subscribe">
        <p>SUBSCRIBE's content</p>
    </div>
    <div id="contact">
        <p>CONTACT's content</p>
    </div>
    <div class="current" id="dummy"></div>
</div>

JS:

$().ready(function()
{
        $('#about').hide();
        $('#subscribe').hide();
        $('#contact').hide();
        $('#dummy').hide();


  $('.home').click(function() {   
    var id = $(this).html().toLowerCase();  

      if ($('.current').length >0) {
      if($('.current')[0].id.toLowerCase() != id)
        {
          $('.current').hide();
          $('.current').removeClass('current');
          $('#'+id).addClass('current');     
          $('#'+id).show();
        }
        else
        {
          $('.current').hide();
          $('.current').removeClass('current');
          $('#dummy').addClass('current');
        }
      }
  });
});

Ersetzen Sie einfach die .hide()'s und .shows()'s, mit ein-und ausblendet.

nur ein Vorschlag wir können jquery' .ausblenden zum ausblenden statt display none..
Das war kopiert aus dem OP-code und wird jetzt entfernt, weil es nicht Teil der Funktion, die Anpassung benötigten, um das problem zu lösen. Guter Punkt, obwohl.
thats cool...keine probs
Wichtiges update, Daniel. Da deine div-id ' s sind nicht lcase, und Ihre id-variable, Sie wird nie passen. Ändern Sie die wenn-Anweisung, um diese: if ($('.current').id.toLowerCase() != id)
Aus einem jsFiddle des Codes. Es wechselt zwischen Ihnen korrekt, aber immer noch blendet dann zurück, anstatt nur den fade-out. jsfiddle.net/SHaQe
Habe es getestet und geschlafen den code ein wenig. Hier ist eine funktionierende jsfiddle: jsfiddle.net/CJjMa/2 . Ersetzen Sie einfach die .verbergen und .show mit fade-outs und ins.

InformationsquelleAutor TimFoolery

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.