Es posible hacer Jquery hide y Show en varios links

kosios · #1 (**permalink**) 04/05/2011, 19:57

Hola amigos resulta que estoy haciendo algo con jquery y vi un tutorial sencillo basico en Youtube y se me ocurrio hacer algo un poco menos basico. bueno no se mucho de Jquery. pero alli va.

VERA, QUiero desplegar desde un menu que tiene 4 links varios DIV que contienen informacion, CON la funcion Show, he logrado desplegar el Div que contiene la informacion referenciada a un link.

QUE deseoo.......Que cuando un usuario ya halla visto la informacion de mi div1 del primero link este pueda cerrarlo con HIDE, ya sea dando de nuevo en el mismo link1 o que al darle click al link2 que cierra el div1 y se habra el div2 y asi sucesivamente. Aqui coloco lo q he hecho.

Código:

<style type="text/css">
#box,#box1,#box2,#box3{ background:#06F; width:300px; height:300px; display:none;}
</style>
<script type="text/javascript">
$(function(){
		$('a').click(function(){
							  
		$('#box').show(5000);			
					
				});   
	
		   });
</script>
</head>

<body>
<table width="300" border="1">
  <tr>
    <th scope="col"><a href="#">General</a></th>
    <th scope="col"><a href="#">Basico</a></th>
    <th scope="col"><a href="#">Cuadratico</a></th>
    <th scope="col"><a href="#">Referencial</a></th>
  </tr>
</table>
<br />
<br />
<div id="box"></div>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>

doylelives · #2 (**permalink**) 05/05/2011, 11:57

De alguna forma en los enlaces deberás hacer referencia hacia los divs,
Agrega en los enlaces un atributo con el valor del id del div al que apunta

Código Javascript:

Ver original<a name="box1"

Con code jquery ocultas todos los div que empiezen con "box"
Luego muestras solo aquel que clickeaste

Código Javascript:

Ver original$('a').click(function(){
        $('div[id^="box"]').hide();
        $('div[id="'+$(this).attr('name')+'"]').show(100);