cách tốt nhất để chuyển đổi hai divs trong cùng khu vực

Question

tôi đang tải hai divs trong một trang là gì.

Tôi có liên kết có nội dung "Hiển thị chế độ xemB". Khi tôi bấm vào đây tôi muốn div B để hiển thị nơi diva là và divA để ẩn.

tôi muốn liên kết thay đổi thành "Hiển thị chế độ xemA"

cách thanh lịch nhất để thực hiện điều này trong jquery là gì?

Answer 1

Bằng việc sử dụng toggle() chức năng:

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

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

Answer 2

Đó không phải là rất khó khăn, hãy thử một cái gì đó như thế này:

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

Nếu câu trả lời ở trên không cho bạn có hiệu quả mà bạn mong muốn, bạn có thể muốn thử sử dụngThay vào đó, phương pháp(ví dụ: target.replaceWith(newContent)). Như tên cho thấy, tên sẽ thay thế target bằng newContent. Phần tốt nhất là nó sẽ làm điều đó tại chỗ.

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

Answer 5

Rất đơn giản.

Ví dụ: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

Dưới đây là quan điểm của tôi về nó:

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

Xem nó trên JSFiddle.

Hy vọng điều này sẽ hữu ích.

Answer 7

Đây là thử thứ hai của tôi mà tôi nghĩ rằng đó là thanh lịch hơn so với câu trả lời ban đầu của tôi:

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