JQuery Swapping die Toggle von Elementen, einen nach dem anderen

Question

Ich bin neu auf JQuery und ich würde gerne wissen, ob Sie eine Idee haben, wie in Bezug auf den folgenden mit JQuery statt JScript zu erreichen:

Sie haben eine Gruppe von einem der in einem oberen div:

<h3>
<a id="acer" href="#acerca">acerca</a> |
<a id="cur" href="#cursos">cursos y clases</a> |
<a id="cal" href="#calendario">calendario</a> |
<a id="con" href="#contacto">contacto</a>
</h3>

Und unter ihnen, im gleichen Container div, gibt es vier Inhalt divs, eine nach der anderen, die jeweils an jedem der Zugehörigkeit eine oben ist:

<div id="acerca"></div>
<div id="cursos"></div>
<div id="calendario"></div>
<div id="contacto"></div>

Nun, hier ist die Idee, dass wir durch das Schließen all diese Inhalte divs aber ein, die ersten beginnen: acerca, die für den Benutzer sichtbar ist:

$(document).ready(function(){

    $("#cursos,#calendario,#contacto").hide();

});

Nun wird die h3 a an der Spitze mit, ich möchte das folgende Verhalten zu:

1.- Wenn ich ein anderes Element klicken als die standardmäßig geöffnet (acerca), und schließen Sie die aktuell geöffnete ein und zeigen Sie mir den neuen. 2.- Wenn ich das gleiche Element klicken, die bereits geöffnet ist (acerca), dann passiert nichts: Es muss immer ein Inhalt div jederzeit offen sein. 3.- Wenn möglich, mit #anchors dem hässlichen „javascript :;“ zu maskieren von den alten Tagen.

Das mit der Verwendung von JavaScript OnClick Funktion ist sehr einfach (mit Ausnahme # 3), aber, ich bin irgendwie mit JQuery stecken zu bleiben.

Hilfe wird sehr geschätzt Sotkra

Answer 1

würde ich eine gemeinsame Klasse für alle DIVs zuweisen, so konnte ich sie kollektiv verweisen. Wenn einer der Anker ausgewählt ist, würde ich von all den DIVs alle „ausgewählt“ Klassen entfernen, dann gelten für den DIV eine „ausgewählte“ Klasse, die angezeigt werden sollen. Ich würde dann alle DIVs verbergen, und die DIV zeigen nicht die ausgewählte Klasse, die die ausgewählte Klasse hat. Auf diese Weise, wenn Sie den gleichen Link klicken Sie nochmals müssen Sie nicht zu blinken, als würden Sie, wenn Sie einfach alle versteckten dann die DIVs die ausgewählten angezeigt werden soll.

  $('a').click( function() {
      var all = $('div.interface');
      var selected = $(this).attr('href');
      all.removeClass('selected');
      $(selected).addClass('selected');
      div.filter(':not(.selected)').hide();
      div.filter('.selected').show();
      return false;  // stop the link from being taken
 }); 

Answer 2

Die einfachste Lösung ist für jedes Element des Menüs manuell die Ereignisse hinzufügen und dann mit „Toggle“ auf weicht versteckt oder zeigen Sie die gleichen Wirkungen wie mit Show Hidde hinzufügen

$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

Eine andere Lösung, in diesem Fall können Sie Menüpunkte ohne Änderung des jQuery-Code, mit dem erforderlichen, dass der Ankertext muss die div id.

hinzufügen

<a href="#acerca" class="anchorClass">acercade</a>
<div id="acercade"></div>

    $(".anchorClass").click(function(){ 
            $("#"+$(this).text()).toggle(); 
    });

Answer 3

Eine etwas andere Variante des tvanfosson Idee .

$('a').click(
    function()
    {
        var selected = $(this).attr('href');
        //If user clicked on a link which is already displayed, do nothing.
        if($(selected).hasClass('selected'))
            return;

        //hide all the divs.
        $('div.interface')
            .hide()
            .removeClass('selected');

        //show the selected div.
        $(selected)
            .show()
            .addClass('selected');
   }
}

Answer 4

Nach Inspiration von Ihren Vorschlägen Zeichnung, ich kam mit dieser:

$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca").hide();
        $("#cursos").hide();
        $("#calendario").hide();
        $("#contacto").hide();
        $(checker).show();

        return false;


            }
   });

In diesem Fall:

1.-Wie würden Sie das ‚Targeting‘ des anderen divs automatisieren, damit Sie sie nicht einzeln nennen? Arrays?

Danke trotzdem, ich werde auf sie arbeiten weiter.

Answer 5

Ich ging nun so weit wie Hinzufügen einer zusätzlichen Funktionalität / touch auf die ‚Anker-Menü‘ selbst. Das Ganze, JQuery weise, sieht wie folgt aus. Vergiss die dummen Variablennamen für das Beispiel verwendet =):

$(document).ready(function(){

$("#cursos,#calendario,#contacto").hide();
$("#ace").addClass('check');


$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');
        var anchorer = $(this);

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca,#cursos,#calendario,#contacto").hide();
        $(checker).show();
        $("#ace,#cur,#cal,#con").removeClass('check');
        $(anchorer).addClass('check');

        return false;  // 


            }
   });


});

Answer 6

Große Antworten Jungs!

ich einige Anpassungen einige Animation zu erhalten, während , um die divs Makeln ... Ich benutze die den Schieber Effekt, aber es sollte mit jeder Art von Animation zu arbeiten.

$('a').click( function() {
    var all = $('div.interfase');
    var selected = $(this).attr('href');
    if($(selected).hasClass('selected') || $(selected).is(":visible"))
        return false;
    else
    {
        all.removeClass('selected');
        $(selected).addClass('selected');
        $('div.interfase:visible').filter(':not(.selected)').hide('slide',
        function() {
        all.filter('.selected').show('slide');
        });
        return false;
    }
});

Hinweis: nur Dieser Code funktioniert, wenn Sie eine zuvor ausgewählte und sichtbar div haben, weil ich die bin mit Callback-Funktion innen hide() die show() Effekt zu aktivieren und sie erhalten schön glatt ...