css jQuery ocultar un div, mostrar otro

Estoy teniendo un reto. Tengo 2 divs , un conjunto para display:none; en el css cuando se carga la página tengo dos enlaces correspondientes. Cuando el usuario haga clic en el link1 1, me gustaría mostrar div1 y ocultar div2 . Y cuando el usuario haga clic en el link2 me gustaría mostrar div2 y ocultar div1 .

¡No he podido hacer que esto funcione! Cualquier ayuda muy apreciada. S

Aquí un ejemplo:

 $(function () { $(".div1, .div2").hide(); $(".link1, .link2").bind("click", function () { $(".div1, .div2").hide(); if ($(this).attr("class") == "link1") { $(".div1").show(); } else { $(".div2").show(); } }); }); 

Y aquí está la demo.

En primer lugar, proporcione el HTML para su pregunta, siempre que haga una pregunta aquí.

En segundo lugar, podrías hacer algo como …

  

Dependiendo de su estructura HTML

si algo como esto

 link1 link2 
div for link 1
div for link 2

entonces el código jQuery se vería así

 $('a').click(function(e){ $('div').eq($(this).index()).show(); $('div').not($('div').eq($(this).index()).hide(); }); 

http://jsfiddle.net/NXdyb/

Este es un principio muy simple … puedes lograrlo de muchas maneras, esto es solo un ejemplo.

Ignorar a los selectores, soy perezoso.

El HTML ->

  Show Div 1  |  Show Div 2  

Div 1
Div 2

El CSS ->

 #div1{ display:none; } 

La jQuery ->

 $('a:eq(0)').click(function(){ $('#div1').toggle(); $('#div2').toggle(); }); $('a:eq(1)').click(function(){ $('#div2').toggle(); $('#div1').toggle(); }); 

¿Estás muerto en jQuery? Esto se puede hacer simplemente con JavsScript antiguo normal.

 function switchVisible() { if (document.getElementById['div1'].style.visibility == 'visible') { document.getElementById['div1'].style.visibility = 'hidden'; document.getElementById['div2'].style.visibility = 'visible'; } else { document.getElementById['div1'].style.visibility = 'visible'; document.getElementById['div2'].style.visibility = 'hidden'; } } 

Entonces ten en tu link1:

  

Eche un vistazo a este ejemplo que podría ayudarlo: http://jsfiddle.net/MUtPy/2/ ^^ Hay muchas formas de hacer esto en Jquery, pero este ejemplo debería comenzar por u = =

Ese violín me ayudó, es realmente comprensible: http://jsfiddle.net/bipen/zBdFQ/1/

 $("#link1").click(function(e) { e.preventDefault(); $("#div1").slideDown(slow); $("#div2").slideUp(slow); }); $("#link2").click(function(e) { e.preventDefault(); $("#div1").slideUp(slow); $("#div2").slideDown(slow); });