Question

我在页面中加载了两个div：divA和divB

我有divB显示样式=无。

我有一个显示“Show viewB”的链接。当我点击这个时，我希望div B显示divA的位置和divA隐藏。

我希望链接更改为“Show viewA”

在jquery中这样做最优雅的方式是什么？

Answer 1

使用toggle()函数：

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

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

Answer 2

很简单。

示例： http://jsfiddle.net/Zmsnd/

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

Answer 3

这是我的第二次尝试，我认为这比我原来的答案更优雅：

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

Answer 4

这不是很难，尝试这样的事情：

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 5

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 6

如果上述答案没有达到您想要的效果，您可能需要尝试使用replaceWith方法（即target.replaceWith(newContent)）。顾名思义，它会将target替换为newContent。最好的部分是它将就地进行。

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

Answer 7

这是我的看法：

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

在JSFiddle上查看。

希望这有帮助。

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

7 个答案: