quelle est la meilleure façon de passer deux divs dans la même zone

Question

je suis en chargeant deux divs dans une page: et DIVB divA

i have style = pas d'affichage DIVB.

J'ai un lien qui dit "Show viewB". Quand je clique dessus, je veux que div B apparaisse où divA est et divA pour se cacher.

je veux alors le lien pour passer à « Afficher viewA »

ce qui est la façon la plus élégante de le faire en jquery?

Answer 1

En utilisant la fonction toggle():

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

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

Answer 2

Ce n'est pas très difficile, essayer quelque chose comme ceci:

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 les réponses ci-dessus ne donnent pas vous l'effet que vous désirez, vous pouvez essayer d'utiliser leMéthodeà la place (c'est-à-dire, target.replaceWith(newContent)). Comme son nom l'indique, il remplacera le target par le newContent. La meilleure partie est qu'il le fera sur place.

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

Answer 5

Très simple.

Exemple: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

Voici mon avis sur la question:

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

Voir sur JSFiddle.

Espérons que cela aide.

Answer 7

Ceci est mon deuxième essai que je pense que c'est plus élégant que ma réponse originale:

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