jQuery ein-und ausblenden Zusammenbruch mehrere divs

Ich muss in der Lage sein, um anzeigen und ausblenden von divs auf einer Seite.

Brauche ich eine standardmäßig aktiv, dann wenn ich auf andere links zeigen ein weiteres div, ich brauche das active div zu verstecken, und so weiter. Also nur ein div geöffnet ist, zu einem gegebenen Zeitpunkt.

Habe ich eine demo zusammen zu zeigen, was ich verlangen, ich habe es zu arbeiten, so zu sprechen, aber ich brauche Sie zum ausblenden/hide des active div, wenn ein anderer link angeklickt wird.

http://jsfiddle.net/QFfzs/3/

InformationsquelleAutor Paul | 2012-08-22
  1. 3

    Müssen Sie eine Klasse, um die divs, die Sie versuchen zu verbergen, dann verbergen Sie alle divs vor dem Wechsel so:

    //adding '.hideMe' to the divs to be toggled
$(document).ready(function() {
    $('#hideDetailsDiv').hide();
    $('a#hideDetailsButton').click(function() {
        if (!$('#hideDetailsDiv').is(':visible')) {
            $('.hideMe').hide(400);
        }
        $('#hideDetailsDiv').toggle(400);
    });
});

    JSFiddle: http://jsfiddle.net/QFfzs/4/

    Aktualisiert JSFiddle: http://jsfiddle.net/QFfzs/5/ (gemacht mit weniger code)

    • ist es möglich, einen link zurück zu der Standard-box auch ähnlich wie die Karte ... links??
    • der einfachste Weg, dies zu tun wäre, auf link hinzufügen zu, dass die Standard-Kiste und verstecken es an den Anfang. Dann nach einem anderen Feld zeigt dieser link wird sichtbar
    InformationsquelleAutor CKKiller
  2. 1

    Probieren Sie etwas wie dieses :

    $('.primaryButton2').click(function(){
   $('.hideDetailsDiv').hide();//hide all divs, add to them class .hideDetailsDiv
   $(this).nextAll('.hideDetailsDiv:first').show(400);
})
    InformationsquelleAutor user1440167
  3. 0

    Hier habe ich komplett fertig bin für das oben genannte Problem. überprüfen können Sie demo-link....

    Demo: http://codebins.com/bin/4ldqp84

    HTML

    <div id="panel">
  <a href="#">
    Show Default
  </a>
  <div class="box">
    <p>
      Default Div Box is already Active..!
    </p>
  </div>
  <a href="#">
    Show Box1
  </a>
  <div class="box">
    <p>
      Showing Div Box 1..!
    </p>
  </div>

  <a href="#">
    Show Box2
  </a>
  <div class="box">
    <p>
      Showing Div Box 2..!
    </p>
  </div>
  <a href="#">
    Show Box3
  </a>
  <div class="box">
    <p>
      Showing Div Box 3..!
    </p>
  </div>
  <a href="#">
    Show Box4
  </a>
  <div class="box">
    <p>
      Showing Div Box 4..!
    </p>
  </div>
</div>

    CSS

    .box{
  border:1px solid #334478;
  width:400px;
  height:50px;
  background:#f7a8a5;
  margin-top:3px;
  /* Default All Divs Are Hidden*/
  display:none;
}
#panel a{
  display:block;
  font-size:13px;
}
.box p{
  text-align:center;
}

    jQuery

    $(function() {
    //Show Default First div is Active
    $("#panel .box:first").show();
    $("#panel a").click(function() {
        $("#panel .box").hide(400);
        $(this).next(".box").show("slow");
    });
});

    Demo: http://codebins.com/bin/4ldqp84

    InformationsquelleAutor gaurang171
Schreibe einen Kommentar