JQuery Permutation Toggle des éléments, un à la fois

Question

Je suis nouveau à JQuery et je voudrais savoir si vous avez une idée sur la façon d'accomplir ce qui suit avec JQuery au lieu de JScript:

vous avez un groupe d'un est dans un top 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> 

et en dessous, à l'intérieur du même conteneur div, il y a quatre divs de contenu, l'un après l'autre, chacun appartenant à chacun des un est au-dessus:

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

Maintenant, l'idée ici est que nous commençons par fermer tous ces contenus des années div mais, la première: acerca, qui est visible à l'utilisateur:

$(document).ready(function(){ 

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

}); 

Maintenant, en utilisant la h3 un est au sommet, Je veux que le comportement suivant ait lieu:

1.- Si je clique sur un élément différent de celui ouvert par défaut (acerca), alors ferme celui qui est actuellement ouvert et montre-moi le nouveau. 2.- Si je clique sur le même élément qui est déjà ouvert (acerca), rien ne se passe: il doit toujours y avoir un contenu div ouvert à tout moment. 3.- Si possible, en utilisant #anchors pour masquer le "javascript:" laid ;; des vieux jours.

Ceci est très simple avec l'utilisation de la fonction onclick de JavaScript (sauf pour # 3) mais, je suis en quelque sorte coincé avec JQuery.

aide est grandement appréciée Sotkra

Answer 1

j'attribuer une classe commune à tous les DIVs pour que je puisse les référencer collectivement. Lorsque l'une des ancres est sélectionnée, je supprime toutes les classes "sélectionnées" de toutes les DIVs, puis j'applique une classe "selected" à la DIV qui devrait être affichée. Je cacherais alors toutes les DIVs qui n'ont pas la classe sélectionnée et montreriez la DIV qui a la classe sélectionnée. De cette façon, si vous recliquez le même lien, vous n'aurez aucun clignotement comme vous le feriez si vous avez simplement caché toutes les DIV puis affiché la sélection.

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

La solution la plus simple est d'ajouter manuellement les événements pour chaque élément du menu, puis caché ou montrant avec « bascule » sur Wich vous pouvez ajouter les mêmes effets que ceux avec spectacle Hidde

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

Une autre solution, dans ce cas, vous pouvez ajouter des éléments de menu sans changer le code de jquery, avec la condition que le texte d'ancre doit être le div id.

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

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

Answer 3

Une variation légèrement différente de tvanfosson's idea.

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

Après avoir établi un peu d'inspiration de vos suggestions, je suis venu avec ceci:

$('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; 


      } 
    }); 

Dans ce cas:

1. Comment vous-automatiser le 'ciblage' du d'autres divs donc vous ne les nommez pas individuellement? des tableaux?

Merci quand même, je continuerai à travailler dessus.

Answer 5

Je suis allé aussi loin que d'ajouter une fonctionnalité supplémentaire/toucher au «menu ancres» lui-même. Le tout, JQuery sage, ressemble à ceci. Peu importe les noms de variables idiots utilisés pour l'exemple =):

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

Bonnes réponses les gars!

J'ai fait quelques ajustements pour obtenir quelques animation tout en basculant les divs ... J'ai utilisé l'effet de diapositive mais il devrait fonctionner avec n'importe quel genre d'animation.

$('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; 
    } 
}); 

Note: Ce code ne fonctionne que si vous avez un div précédemment sélectionné et visible, parce que je suis en utilisant la fonction de rappel à l'intérieur hide() pour activer l'effet show() et obtenir agréable et lisse ...