在同一区域切换两个div的最佳方式是什么

通过使用 toggle()

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

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

很简单。

例子: http://jsfiddle.net/Zmsnd/

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

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

不难,试试这样的:

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

replaceWith 方法(即。, target.replaceWith(newContent) ). 顾名思义,它将取代 target newContent . 最好的部分是它会在适当的地方做。

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

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
});

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

穿上它 JSFiddle .