JQuery Intercambio de la Toggle de elementos, uno a la vez

Question

Soy nuevo en jQuery y me gustaría saber si tienes alguna idea en cuanto a cómo llevar a cabo lo siguiente con jQuery en lugar de JScript:

Tiene un grupo de una de la parte superior dentro de un 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>

Y por debajo de ellos, dentro del mismo contenedor div, hay cuatro divs contenido, uno tras otro, cada uno perteneciente a cada uno de los Atléticos anterior:

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

Ahora, la idea aquí es que comenzamos por el cierre de todos estos contenidos div de menos uno, el primero: about, que es visible para el usuario:

$(document).ready(function(){

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

});

Ahora, utilizando el h3 a en la parte superior, quiero que el siguiente comportamiento que tendrá lugar:

1.- Si hago clic en un punto diferente de la que está abierta por defecto (ACERCA), a continuación, cierre la que actualmente está abierta y me muestran el nuevo. 2.- Si hago clic sobre el mismo tema que ya está abierto (ACERCA), entonces no pasa nada: tiene que ser siempre un contenido div abierta en todo momento. 3.- Si es posible, utilizando #anchors para enmascarar el "javascript :;" feo de los viejos tiempos.

Esto es muy sencillo con el uso de la función de JavaScript onclick (con excepción de # 3), pero, de algún modo estoy quedarse con jQuery.

ayuda es muy apreciada Sotkra

Answer 1

Me asignar una clase común a todos los DIVs para que pudiera hacer referencia a ellos colectivamente. Cuando se selecciona una de las anclas, me quito las clases "seleccionados" de todos los DIVs, a continuación, aplicar una clase "seleccionado" para el DIV que debe mostrarse. Entonces yo ocultar todos los DIVs que no tienen la clase seleccionada y muestran el DIV que tiene la clase seleccionada. De esta manera si usted Haga clic de nuevo el mismo enlace que no tendrá ningún intermitente como lo haría si simplemente escondidos todos los DIVs a continuación, mostrar la seleccionada.

  $('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 solución más sencilla es añadir manualmente los eventos para cada elemento del menú y luego oculta o muestra con "conmutación" en los que se podrá añadir los mismos efectos que con show Hidde

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

Otra solución, en este caso se puede añadir elementos de menú sin cambiar el código jQuery, con el requisito de que el texto de anclaje debe ser el div id.

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

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

Answer 3

Una variación ligeramente diferente de la de tvanfosson 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

Después de la elaboración de algo de inspiración de sus sugerencias, se me ocurrió esto:

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


            }
   });

En este caso:

1.-¿Cómo automatizar la 'selección de objetivo' de los otros divs para que no nombra de forma individual? matrices?

Gracias de todos modos, voy a seguir trabajando en ello.

Answer 5

Ahora fue tan lejos como la adición de una funcionalidad extra / táctil para el 'menú anclas' en sí. Todo esto, JQuery sabia, se parece a esto. No importa los nombres de variable tontas usado para el ejemplo =):

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

grandes respuestas chicos!

he hecho algunos ajustes para conseguir un poco de animación, mientras que alternar los divs ... He utilizado el efecto deslizante pero debería funcionar con cualquier tipo de animación.

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

Nota: Este código sólo funciona si tiene un div previamente seleccionado y visible, porque yo estoy usando el llamada de retorno en el interior hide() para activar el efecto show() y conseguirlo agradable y suave ...