JQuery pour échanger le levier d'é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 haut 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 d'eux, à l'intérieur du même conteneur div, il y a quatre divs de contenu, l'un après l'autre, appartenant chacun à 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 est ici que nous commençons par fermer tous ces contenus div mais ce l'un, le premier: 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 aura lieu:

Si je clique 1.- un élément différent de celui ouvert par défaut (acerca), puis fermez le moi un et montrer actuellement ouvert 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 en tout temps. Si possible 3.-, en utilisant #anchors pour masquer le laid « javascript :; » des vieux jours.

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

L'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'un des points d'ancrage est sélectionné, je supprimer tous les « sélectionnés » des classes de tous les DIVs, puis appliquer une classe « sélectionnée » à la DIV qui devrait être montré. Je puis cacher tous les DIVs qui n'ont pas la classe sélectionnée et montrent la DIV qui ne possède la classe sélectionnée. De cette façon, si vous cliquez à nouveau le même lien vous pas de clignoter comme vous le feriez si vous simplement caché tous les DIVs affichent alors celle sélectionnée.

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

$("#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 modifier le code jquery, avec la condition que le texte d'ancrage 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 variante légèrement différente du idée de tvanfosson .

$('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 » des autres divs afin que vous ne les nommez pas individuellement? tableaux?

Merci de toute façon, je vais continuer à y travailler.

Answer 5

Je suis allé maintenant aussi loin que l'ajout d'une fonctionnalité supplémentaire / tactile pour lui-même "menu ancres. Le tout, JQuery sage, ressemble à ceci. Nevermind les noms de variables stupides 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

Great réponses gars!

J'ai fait quelques ajustements pour obtenir des animation tout les divs ... je l'effet de diapositives, mais il devrait fonctionner avec tout type 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;
    }
});

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