Busqué en la pila una respuesta que pudiera aplicar, pero no soy bueno con javascript.

Tengo una lista de enlaces que necesitan mostrar un div oculto. Suficientemente fácil. Pero hay alrededor de 8 de estos enlaces y los divs tienen que ocupar el mismo espacio. Por lo tanto, cuando hace clic en el enlace 1 (aparece el div del enlace 1), y luego hace clic en el enlace 2, necesito que el div del enlace 1 desaparezca y que aparezca el div del enlace 2.

Actualmente, estoy usando la función de alternar de jQuery para obtener el efecto que estoy buscando, pero debe hacer clic en el enlace dos veces para ocultar la información nuevamente.

Cualquier idea sería muy apreciada!

1
Critologist 30 ago. 2011 a las 19:29

4 respuestas

La mejor respuesta

Sin tener ninguna sintaxis con la que trabajar, debería poder usar algo como lo siguiente:

Para ocultar los enlaces en sí:

//When a link is clicked...
$(".yourlink").click(function(){
     //Hide all of the links
     $(".yourlink").hide();
     //Show the selected link
     $(this).show();
});

del mismo modo, si desea utilizar divs: (utilizando el HTML incluido a continuación)

//Javascript 
$(".link").click(function()
{
    $('div').hide();
    $('#'+$(this).attr('name')).show();   
});

//HTML
<a class='link' name='1'>Link 1</a>
<a class='link' name='2'>Link 2</a>
<a class='link' name='3'>Link 3</a>
<a class='link' name='4'>Link 4</a>
<a class='link' name='5'>Link 5</a>
<a class='link' name='6'>Link 6</a>
<a class='link' name='7'>Link 7</a>
<a class='link' name='8'>Link 8</a>

<div id='1'>1</div>
<div id='2'>2</div>
<div id='3'>3</div>
<div id='4'>4</div>
<div id='5'>5</div>
<div id='6'>6</div>
<div id='7'>7</div>
<div id='8'>8</div>

Demostración de trabajo

6
Rion Williams 30 ago. 2011 a las 19:31
    <a href="#" class="hider">link 1</a>
    <div id="div1" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 2</a>
    <div id="div2" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 3</a>
    <div id="div3" class="content" style="display:none;">
    </div>

    <a href="#" class="hider">link 4</a>
    <div id="div4" class="content" style="display:none;">
    </div>

    $(".hider").click(function(event){
        $(".content").hide();
        $(this).next().show();


    });
0
BZink 30 ago. 2011 a las 15:36

En lugar de alternar, use .show () para mostrar y .hide () para ocultar.

0
Simone Gianni 30 ago. 2011 a las 15:31

Hay dos enfoques simples que podría adoptar en esta situación.

  1. Utilice CSS para ayudar a alternar la visibilidad.
  2. Utilice show() / hide() en jQuery.

El que sugeriría es utilizar clases CSS para ayudarlo a cumplir su solicitud. Cree una clase .showObject { display: block; } y otra .hideObject { display: none; }. Una vez que tenga las clases, puede utilizar las funciones jQuery addClass() y removeClass() para modificar la propiedad de visualización.

0
RobB 30 ago. 2011 a las 15:33