एक ही क्षेत्र

Question

मैं एक पेज में दो divs लोड हो रहा हूँ में दो divs टॉगल करने के लिए सबसे अच्छा तरीका क्या है।

मेरे पास एक लिंक है जो "व्यूबीबी दिखाएं" कहता है। जब मैं इसे क्लिक करता हूं तो मैं div बी को दिखाना चाहता हूं जहां diva है और diva को छिपाने के लिए।

मैं तो लिंक करने के लिए "viewA शो"

क्या jQuery में ऐसा करने का सबसे खूबसूरत तरीका है बदलना चाहते हैं?

Answer 1

toggle() समारोह का उपयोग करके आप जिस प्रभाव को चाहते हैं, आपका उपयोग करने का प्रयास करना चाहेंगे इसके बजायविधि (यानी, target.replaceWith(newContent))। जैसा कि नाम से पता चलता है, यह target को newContent के साथ प्रतिस्थापित करेगा। सबसे अच्छा हिस्सा यह है कि यह जगह में करेगा।

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

Answer 2

कि बहुत मुश्किल नहीं है, कुछ इस तरह का प्रयास करें:

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

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

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

ऊपर जवाब नहीं देते हैं:

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

बहुत आसान।

उदाहरण:

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

JSFiddle पर यह देखें: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

यहाँ उस पर मेरी ले रहा है।

उम्मीद है कि इससे मदद मिलती है।

Answer 7

यह मेरी दूसरी कोशिश है मुझे लगता है कि है कि मेरे मूल जवाब की तुलना में अधिक सुंदर है:

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