jquery mostrar ocultar área de reemplazar
Pregunta
¿Cómo puedo usar jQuery para mostrar / ocultar la misma área div ... esencialmente el canje de contenido?
Esto es lo que tengo hasta ahora, y no puedo encontrar la manera de ocultar el contenido anterior y reemplazarlo con el nuevo contenido:
<script type="text/javascript">
$(document).ready(function(){
$('.content').hide();
$('a').click(function(){
$('.content').show('slow');
});
//then hide previous content
});
</script>
<a href="#" id="a-link">A</a>
<a href="#" id="b-link">B</a>
<div class="start-content" id="a">
content here
</div>
<div class="content" id="b">
content here
</div>
Solución
Si envuelve el contenido en un div, esto sería un poco más fácil, así:
<div id="wrap">
<div class="start-content" id="a">
content here
</div>
<div class="content" id="b">
content here
</div>
</div>
Y esto en jQuery:
$('a').click(function(){
$("#wrap > div").hide(); //hide previous
$('.content').show('slow'); //show what's clicked on
});
Dado que usted tiene un convenio con sus identificaciones, sin embargo, se puede usar eso, tampoco dará una clase de enlaces, o envolverlos, así, de esta manera:
<div id="links">
<a href="#" id="a-link">A</a>
<a href="#" id="b-link">B</a>
</div>
<div id="wrap">
<div class="start-content" id="a">
content here
</div>
<div class="content" id="b">
content here
</div>
</div>
A continuación, se podría utilizar un solo controlador de eventos para todos los enlaces de esta manera:
$('#wap > div:not(.start-content)').hide(); //Initial hide
$("#links a").click(function() {
$("#wrap > div").hide(); //hide previous
var id = $(this).attr("id").replace('-link', ''); //matching id
$('#' + id).show('slow'); //show what's clicked on
});
Otros consejos
Mantener el div contenido visible; En cambio, sólo intercambiar el contenido HTML con
$('.content').html(strvalue);