i bir sayfada iki div'leri yükleme ediyorum aynı bölgede

Question

iki div'leri geçiş yapmak için en iyi yol budur.

Ben göster "viewB" diyen bir bağlantı var. Bunu tıkladığımda, divA'nın ve divA'nın gizleneceği yeri göstermek için div B'yi istiyorum.

i sonra bağlantı göster "viewA"

jquery Bunu yapmanın en zarif yolu nedir değiştirmek istediğiniz? Yukarıdaki cevaplar vermezseniz

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

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

Answer 1

: Böyle bir şey deneyin, çok zor değil

Answer 2

İstediğiniz etkiyi,kullanmayı deneyebilirsiniz Bunun yerineusulü (yani, target.replaceWith(newContent)). Adından da anlaşılacağı gibi, , newContent ile değiştirilecektir. En iyi yanı, bunun yerinde yapacağıdır.

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

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

: toggle() fonksiyonu kullanarak

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

Çok basit.

Örnek:

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

JSFiddle üzerine bakınız: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

İşte bunun üzerine almak benim.

Bu yardımcı olur umarım.

Answer 7

Bu Bunun benim orijinal cevap daha şık olduğunu düşünüyorum bu benim ikinci denemede:

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