प्रदर्शन कैसे जोड़ें: एक jQuery शो () फ़ंक्शन में इनलाइन-ब्लॉक?

Question

मेरे पास कुछ कोड हैं:

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

शो फंक्शन जोड़ता है display:block। लेकिन मैं display:inline-blockब्लॉक के बजाय जोड़ना चाहूंगा ।

Comments

आपको कुछ और विवरण प्रदान करने की आवश्यकता होगी। यह मेरे लिए एक त्वरित परीक्षा में काम करता है: jsfiddle.net/DD3Sf ।

— गीज

@gijs अब इसके काम करने पर खेद है। मुझे लगता है कि यह कुछ कैश की समस्या है। आपके समय के लिए धन्यवाद

— गिरि

Answer 1

इसके बजाय show, सामग्री को छिपाने और दिखाने के लिए सीएसएस का उपयोग करने का प्रयास करें।

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}

Comments

यह स्पष्ट प्रतीत हो सकता है, लेकिन यदि आप अभी भी show( $("#id").show(500)) के समय के पहलू का उपयोग करना चाहते हैं , तो बस cssइसे समारोह में जोड़ें :$("#id").show(500).css("display", "inline-block");

— BenR

मैं इसे एक कदम आगे ले जाऊंगा और सीएसएस कक्षाओं का उपयोग करते हुए सभी छुपाने / दिखाने का ध्यान रखूंगा, न कि jQuery का। $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); सीएसएस में:.hidden { display: none !important }

— जो मैफेई

भले ही यह स्वीकृत उत्तर है, लेकिन यह प्रतिबिंबित नहीं करता है कि jquery डॉक्स में क्या कहा गया है : यह मोटे तौर पर कॉलिंग .cs ("डिस्प्ले", "ब्लॉक") के बराबर है, सिवाय इसके कि प्रदर्शन संपत्ति जो कुछ भी शुरू में बहाल की गई थी। यदि किसी तत्व में इनलाइन का प्रदर्शन मूल्य है, तो उसे छिपाया और दिखाया गया है, इसे एक बार फिर इनलाइन प्रदर्शित किया जाएगा। इसलिए डिफ़ॉल्ट होने के लिए displayआपको अपने सीएसएस में एक वर्ग जोड़ने की जरूरत है और display:inline-block;फिर एलिमेंट की आईडी का उपयोग करके कॉल करें । यह क्लीनर और अधिक पूर्वानुमान योग्य कोड और शैली में आसान है। hide()show()

— अब्दुल्ला अदीब

@AbdullahAdeeb समस्या यह है कि आपको hide()पेज लोड पर js द्वारा की आवश्यकता होगी । सेटिंग #element{display:inline-block;display:none;}नहीं करता है। मुझे लगता है कि सबसे साफ समाधान है $('#element').fadeIn().addClass('displaytype');- ऊपर दिए गए उत्तर से बेहतर, क्योंकि आप .displaytypeसीएसएस में अलग-अलग सेट कर सकते हैं और जेएस में एक कार्य दिखा सकते हैं। मेरा उत्तर यहाँ देखें: stackoverflow.com/questions/1091322/…

— फ़ेंकी

Answer 2

आपके द्वारा उपयोग किए जाने के बाद सीएसएस संपत्ति सेट .show()करना काम करना चाहिए। हो सकता है कि आप अपने HTML पृष्ठ पर गलत तत्व को लक्षित कर रहे हों।

 $('#foo').css('display', 'inline-block');

लेकिन अगर आप .show(), .hide()उन सीएसएस संपत्तियों को मैन्युअल रूप से सेट नहीं करने का कोई प्रभाव नहीं उपयोग कर रहे हैं तो :

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

Comments

ध्यान दें कि jquery शो / छिपाने / टॉगल पिछले प्रदर्शन मूल्यों को पुनर्स्थापित करता है। इसलिए यदि आप इसे jquery के साथ छिपाते हैं, तो कॉलिंग शो काम करेगा।

— कर्टिस येलोप

"आपके द्वारा .show () काम करने के बाद CSS संपत्ति सेट करना।" व्हाट्सएप शो () का उपयोग करने का बिंदु यदि आप अभी भी सीएसएस को मैन्युअल रूप से अपडेट करने जा रहे हैं?

— JSON

Answer 3

शो के बाद (या फीका) (जैसे) के बाद सीएसएस का उपयोग करें:

$('div.className').fadeIn().css('display', 'inline-block');

Answer 4

मैंने वह किया

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

एक जादू की तरह काम करता है।

Comments

क्या यह एक उत्तर है या एक स्वीकृति है ..?

— NREZ

Answer 5

रेज़ का समाधान .hide()और .show()विधियों के लिए काम करेगा, लेकिन इसके लिए काम नहीं करेगा.toggle() विधि के ।

परिदृश्य पर निर्भर करता है, एक सीएसएस वर्ग .inline_block { display: inline-block; }और कॉलिंग $(element).toggleClass('inline_block')मेरे लिए समस्या हल करती है।

Answer 6

आप चेतन का उपयोग कर सकते हैं दिखावा / छुपाने के हैं

कुछ इस तरह:

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}

Answer 7

इसे इस्तेमाल करे:

$('#foo').show(0).css('display','inline-block');

Comments

इस show()में व्यर्थ है। यह उसी तरह है जैसे$('#foo').css('display','inline-block');

— लियाम

@ लिआम व्यर्थ नहीं। आप अन्य विशिष्ट showविकल्पों तक पहुंच प्राप्त करने के लिए 0 में बदलाव कर सकते हैं या इसमें बदलाव कर सकते हैं।

— जेएसडेरिस

Answer 8

मुझे लगता है कि आप एनीमेशन चाहते हैं और प्रदर्शन संपत्ति को अंत में सेट करना चाहते हैं। उस स्थिति में आप show()कॉलबैक का बेहतर उपयोग कर सकते हैं जैसा कि नीचे दिखाया गया है

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

इस तरह आप दोनों परिणाम प्राप्त करेंगे।

Comments

यह सही नहीं है, आप inline-blockपूरे एनीमेशन के चलने के बाद ही मोड को समाप्त करेंगे। इसका मतलब है कि यह 400ms के बीच blockऔर inline-blockबाद में "पॉप" होगा ।

— एलेक्सिस विल्के

Answer 9

<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>

Answer 10

वास्तव में jQuery केवल 'डिस्प्ले' प्रॉपर्टी की वैल्यू को क्लियर करता है, और इसे 'ब्लॉक' में सेट नहीं करता है (देखें jQuery.showHide () का आंतरिक कार्यान्वयन) -

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

कृपया ध्यान दें कि आप $ .fn.show () / $ fn.hide () को ओवरराइड कर सकते हैं; तत्व में मूल प्रदर्शन को ही छुपाते समय छिपाया जाता है (जैसे कि एक विशेषता के रूप में या $ .data () में); और फिर दिखाते समय इसे फिर से लागू करें।

इसके अलावा, सीएसएस का उपयोग करना महत्वपूर्ण है! शायद यहां काम नहीं करेगा - चूंकि स्टाइल इनलाइन सेट करना आमतौर पर किसी भी अन्य नियम से अधिक मजबूत होता है

Answer 11

सबसे अच्छा .let यह माता display :inline-block- पिता है या माता - पिता को जोड़ते हैं divकि CSS के पास क्या है display :inline-block।

Answer 12

सबसे अच्छा तरीका चयनकर्ता के लिए महत्वपूर्ण प्रत्यय जोड़ना है।

उदाहरण:

 #selector{
     display: inline-block !important;                   
}

Comments

यह नहीं रोकता है।

— काँन सोरल

महत्वपूर्ण केवल किनारे के मामलों में आवश्यक है जब कोई अन्य विकल्प नहीं है। मेरी राय में इस समस्या से निपटने का सही तरीका नहीं है जब इसे बेहतर jQuery कोड के साथ तय किया जा सकता है।

— ब्रैंडन

इसके बारे में याद रखने वाली महत्वपूर्ण बात !importantयह है कि इसका उपयोग न करना महत्वपूर्ण है।

— user1728278