jQuery शो() फ़ंक्शन इनलाइन ब्लॉक प्रदर्शित करता है। कैसे? ब्लॉक:

Question

मैं इस

function switch_tabs(obj) 
{ 
    $('.tab-content').hide(); 
    $('.tabs a').removeClass("selected"); 
    var id = obj.attr("rel"); 

    $('#'+id).show(); 
    obj.addClass("selected"); 
} 

शो समारोह की तरह कुछ कोड प्रदर्शन कहते है। लेकिन मैं डिस्प्ले जोड़ना चाहता हूं: ब्लॉक के बजाय इनलाइन-ब्लॉक।

क्या कोई मेरी मदद कर सकता है? धन्यवाद

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"); 
} 

Answer 2

आप उपयोग कर सकते हैं animate शो के insted/छिपाने

कुछ इस तरह:

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 3

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

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

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

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

Answer 4

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

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

Answer 5

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

उदाहरण:

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

Answer 6

इस प्रयास करें:

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

Answer 7

मैंने किया था कि

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

काम करता है एक आकर्षण की तरह।

Answer 8

सीएसएस का उपयोग करें() सिर्फ शो() या fadein() इस तरह के बाद:

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

Answer 9

वास्तव में 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() को ओवरराइड कर सकते हैं; छुपाते समय मूल रूप से मूल प्रदर्शन को संग्रहीत करना (उदा। एक विशेषता के रूप में या $।डेटा()); और फिर दिखाते समय इसे फिर से लागू करना।

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

Answer 10

मुझे लगता है कि आप एनीमेशन दोनों चाहते हैं और अंत में डिस्प्ले प्रॉपर्टी सेट करना चाहते हैं। उस मामले में आप बेहतर रूप में नीचे

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

से पता चला इस तरह आप दोनों परिणाम प्राप्त होगा show() कॉलबैक का उपयोग करें।

Answer 11

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

Answer 12

<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>