2013-01-07 20 views
6

मैं निम्नलिखित वेबसाइट है:jQuery टैब फ़्लैश (FOUC) पृष्ठ लोड होने

http://cassidoo.public.iastate.edu/

मैं अपने मेनू के लिए JQuery यूआई टैब्स उपयोग कर रहा हूँ। जब आप पृष्ठ लोड करते हैं, तो टैब में सामग्री का एक फ्लैश होता है।

मैंने जावास्क्रिप्ट में चीजों को छिपाने के लिए ui-tabs-hide चाल से सब कुछ करने की कोशिश की है। क्या कोई चाल है जो मुझे याद आ रही है? मुझे क्या करना चाहिए?

आपकी मदद के लिए धन्यवाद!

+0

मुझे लगता है कि आपको दस्तावेज़ तैयार स्थिति पर tabcontrol.js में जो कुछ है उसे कॉल करना चाहिए। –

+0

सीएसएस (जेएस नहीं) के साथ टैब पर z अनुक्रमणिका = -1 आज़माएं - देखें कि यह – sajawikio

उत्तर

9

मैं यहाँ एक ऐसी ही स्थिति में पड़ गए और कैसे मैं इस मुद्दे को संबोधित है:

(1.) "छिपाएँ" नामक एक सीएसएस वर्ग को परिभाषित और यह निर्धारित करने के लिए "प्रदर्शन: कोई"

(2।) प्रत्येक div में "contentpanel" वर्ग के साथ, अपने मार्कअप में के बगल में "छुपाएं" जोड़ें। यह सुनिश्चित करेगा कि जावास्क्रिप्ट को संभालने के लिए प्रतीक्षा करने के बजाए पेज
कोई भी लोड नहीं करेगा।

(3.) जब आप jquery.ui.tabs चयनकर्ता बनाते हैं, तो "टैबस्क्रेट" विधि का उपयोग अपनी सामग्री पैनलों से कक्षा "छुपाएं" को हटाने के लिए करें। इसलिए अपने चयनकर्ता कुछ इस तरह दिखेगा:

//define tabs instance 
    $("#tabs").tabs({ 

     create: function(event, ui) { 
      //when tabs are created, remove your class .hide from each content panel 
      //so jquery tabs will control when panel content will surface 
      $(your contentpanel selector).removeClass(hide); 
     } 
    //whatever else you need to do 
    .... 
    ... 
    .. 
    }); 

jQuery यूआई टैब के बारे में अधिक जानकारी के लिए आंतरिक विधियों, इस पढ़ें:

http://api.jqueryui.com/tabs/

और पढ़ने

बनाने (घटना, ui)

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

क्रिस

+0

काम करता है यह पूरी तरह से काम करता है !! धन्यवाद! –

+0

कोई समस्या नहीं है। किसी भी समय। – chrisvillanueva