¿cuál es la mejor manera de alternar dos divs en la misma zona

Question

Estoy cargando dos divs en una página: DIVA y divB

tengo divB pantalla style = ninguno.

Tengo un enlace que dice "Mostrar viewB". Cuando hago clic en esto quiero que Div B aparezca donde divA es y divA para ocultar.

i luego quieren que el vínculo para cambiar a "Mostrar viewa"

lo que es la forma más elegante de hacer esto en jQuery?

Answer 1

Mediante el uso de la función toggle():

$("#link").toggle(function() { 
    toggleDivs(); 
    $(this).html("Show viewA"); 
}, function() { 
    toggleDivs(); 
    $(this).html("Show viewB"); 
}); 

function toggleDivs() { 
    $("#divA, #divB").toggle(); 
} 

Answer 2

Eso no es muy difícil, intente algo como esto:

var $divA = $('#a'), 
    $divB = $('#b'), 
    $link = $('#link'); 

// Initialize everything 
$link.text('Show A'); 
$divA.hide(); 

$link.click(function(){ 

    // If A is visible when the link is clicked 
    // you need to hide A and show B 
    if($divA.is(':visible')){ 
    $link.text('Show A'); 
    $divA.hide(); 
    $divB.show(); 
    } else { 
    $link.text('Show B'); 
    $divA.show(); 
    $divB.hide(); 
    } 

    return false; 
}); 

Example on jsFiddle

Answer 3

var divA = $("#divA"); 
var divB = $("#divB"); 
var originalState = true; 

$("#toggler").click(function(e) { 
    originalState = !originalState; 
    if (originalState) { 
     divB.hide(); 
     divA.show(); 
    } else { 
     divA.hide(); 
     divB.show(); 
    } 
    $(this).html(originalState ? "Show viewB" : "Show viewA"); 
    e.preventDefault(); // Assuming you're using an anchor and "#" for the href 
}); 

Answer 4

Si las respuestas anteriores no dan usted el efecto que desea, puede intentar usar el replaceWith método en su lugar (es decir, target.replaceWith(newContent)). Como su nombre indica, reemplazará el target con el newContent. La mejor parte es que lo hará en el lugar.

divA.replaceWith(divB); 
... 
divB.replaceWith(divA); 

Answer 5

Muy simple.

Ejemplo:http://jsfiddle.net/Zmsnd/

$('#toggle').click(function() { 
    $('#container > .toggleMe').toggle(); 
    $(this).text(function(i,txt) { return txt === "Show viewB" ? "Show viewA" : "Show viewB"; }); 
}); 

Answer 6

Aquí está mi opinión sobre ella:

$("#link").click(function() { 
    $("div[id^=tog_]").toggle(); 
    $(this).text("Show " + $("div[id^=tog_]").not(":visible").attr("id").substr(4)); 
}); 

verlo en JSFiddle.

Espero que esto ayude.

Answer 7

Este es mi segundo intento que yo creo que es más elegante que mi respuesta original:

$("#link").click(function(e) { 
    e.preventDefault(); 
    $("#divA, #divB").toggle(); 
    $(this).text(function(i, text) { return (text == "Show viewA") ? "Show viewB" : "Show viewA" }); 
});