imagenes - JavaScript mostrar/ocultar pestaña

ocultar div con efecto javascript

Question

Lo que quiero es ocultar primero todo el contenido, luego hacer clic en una pestaña, se muestra el contenido correspondiente (la pestaña se vuelve ''activa''), donde volver a hacer clic en ella desaparecerá. algunas de las pestañas son solo un enlace ''mailto''.

problema es que no puedo ocultar las pestañas cuando vuelva a hacer clic

    $(document).ready(function(){
    $(''#nav div'').hide();
    $(''#nav div:first'').show();
    $(''#nav ul li:first'').addClass(''active'');
    $(''#nav ul li a'').click(function(){ 
        $(''#nav div'').hide();
        $(''#nav ul li'').removeClass(''active'');
        $(this).parent().addClass(''active''); 
        var currentTab = $(this).attr(''href''); 
        if($(currentTab).css(''display'')==''none''){
            $(currentTab).show();
        }else{
            $(currentTab).hide();
        }

    }
);
});

el código de navegación es el siguiente:

<div id="nav">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="mailto:email">Email</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div id="about">
      about
    </div>
    <div id="contact">
      contact
    </div>
</div>

Answer 1

Cambie la función de hacer clic a:

$(''#nav ul li a'').click(function(){ 
    var currentTab = $(this).attr(''href'');  
    $(''#nav div'').not(currentTab).hide();
    $(''#nav ul li'').removeClass(''active'');
    $(this).parent().toggleClass(''active'');     
    if (currentTab.indexOf("mailto:") === -1)
    {
        $(currentTab).toggle();
    }
});

Ejemplo de trabajo

Answer 2

Esto debería funcionar:

$(function() {
    $(''#nav div'').hide();
    $(''#nav div:first'').show();
    $(''#nav ul li:first'').addClass(''active'');
    $(''#nav ul li a'').click(function(){
        var currentTab = $(this).attr(''href'');
        var vis = $(currentTab).is('':visible'');
        $(''#nav div'').hide();
        $(''#nav ul li'').removeClass(''active'');
        $(this).parent().addClass(''active'');
        if(vis) {
            $(currentTab).hide();
        } else {
            $(currentTab).show();
        }
    });
});

debe verificar si la pestaña actual está visible antes de ocultarla.

trabajando: http://jsfiddle.net/tqhHA/

Answer 3

   $(document).ready(function(){
$(''#nav div'').hide();
$(''#nav div:first'').show();
$(''a'').click(function(){    
    var currentTab = ''#''+$(this).text().toLowerCase();
    if($(currentTab).is('':visible'')){
        $(''#nav div'').hide();
        $(currentTab).hide();
    }else{
        $(''#nav div'').hide();
        $(currentTab).show();
    }
}
);
});


<div id="nav">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Email</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div id="about">
      about
    </div>
    <div id="contact">
      contact
    </div>
</div>

Intente el código anterior. Cambio el valor de href a solo "#" y luego un cambio en jquery. Por favor, pregunte en el comentario si tiene alguna duda .. haga clic aquí para probar