2009-12-06 16 views
5

मैं एक बहुत ही त्वरित jQuery स्लाइड शो बना दिया है पर एक स्प्लिट सेकेंड के लिए दिखा रहे हैं, और मैं DIV के जो दिखाया जा नहीं करना चाहिए जब तक यह अपनी बारी जाहिर है छिपाने के लिए इस का उपयोग कर रहा:jQuery कैसे DIVs छिपाने के लिए, वे पेज लोड

$(document).ready(function() { 
    //Hide All Div's Apart From First 
    $('div#gall2').hide(); 
    $('div#gall3').hide(); 
    $('div#gall4').hide(); 

लेकिन पृष्ठ लोड करने पर आप छिपे जाने से पहले एक विभाजित दूसरे के लिए DIV के gall2 gall3 और gall4 देख सकते हैं।

यह सिर्फ मेरी सीएसएस अंदर जोड़ने के लिए ठीक नहीं होगा:

#gall2, #gall3, #gall4{ display:none;} 

यह एक दूसरे विभाजन के लिए दिखा उनमें से समस्या का समाधान होगा, बस अगर यह स्वीकार्य है

धन्यवाद जानना चाहते हैं।

उत्तर

2

हाँ, यह अपने सीएसएस

अन्य उत्तरदाताओं सही हैं में यह करने के लिए निश्चित रूप से स्वीकार्य है। जेएस के साथ चीजों को केवल दृश्यमान बनाने के लिए यह एक अच्छा अभ्यास नहीं है। मुझे लगता है कि मैं सिर्फ तकनीकी रूप से सोच रहा था: इस तरह से अपना सीएसएस बदलना इस मुद्दे को हल करेगा।

+1

मुझे पता है कम एक कम लोग जे एस विकलांग है, लेकिन यदि कार्यक्षमता जे एस के साथ सक्षम * होने जा रही है *, तो सामग्री भी * छिपा * हो कुछ जे एस से शुरू हो रहा का उपयोग कर देना चाहिए। यह ठीक है अगर जेएस बस एक वर्ग जोड़ता है, लेकिन सीएसएस में डिफ़ॉल्ट रूप से छिपकर एक अच्छा विचार नहीं है। –

0

हमेशा कल्पना करना उन है जो जे एस बंद कर दिया क्या देखेंगे प्रयास करें। यदि आप सीएसएस समाधान का उपयोग करते हैं, तो गैर-पहले डीआईवी उनके लिए भी नहीं दिखाए जाएंगे, लेकिन यदि आप प्रोग्रामेटिक रूप से स्लाइड्स बदलते हैं, तो वे स्पष्ट रूप से केवल पहले देखेंगे। उन्हें "नो जेएस" विकल्प देना सबसे अच्छा है। फिर, यदि आप सुनिश्चित कर सकते हैं कि उपयोगकर्ता ने जेएस सक्षम किया है, तो आप सीएसएस का उपयोग करके divs को छुपा सकते हैं और जेएस का उपयोग करके उन्हें दिखा सकते हैं।

15

सीएसएस इन को अक्षम करना ठीक है, लेकिन उसके बाद जे एस के बिना उपयोगकर्ता देखना चाहते कभी नहीं होगा।

जे एस के साथ उपयोगकर्ताओं के लिए अक्षम करने के लिए केवल, शरीर और उचित सीएसएस निशान:

<body> 
    <script type="text/javascript"> 
    document.body.className += " js"; 
    </script> 

सीएसएस:

.js #gall2, .js #gall3, .js #gall4 { display: none; } 
+3

@orip। मैं कुछ ऐसा ही करता हूं, लेकिन इसे सिर में करता हूं, और 'html.documentElement.className + = "js" '' html' तत्व पर लागू करने के लिए इसका उपयोग करता हूं। मैंने इसे अपनी सभी अन्य स्क्रिप्ट से पहले एक स्क्रिप्ट ब्लॉक में रखा था। –

+0

यह बहुत चालाक है – Gregory

+0

@ ग्रेगरी - यह मेरा विचार नहीं है, मैंने इस तकनीक को दूसरों द्वारा उपयोग किया है। मैंने यह भी सोचा कि यह बहुत चालाक था :) – orip

2

orip का जवाब करने के लिए एक alternatie रूप में, आप यदि आपकी निम्न कर सकते हैं 'टी <body> में स्क्रिप्ट्स जोड़ने पसंद:

<html> 
<head> 
    <script src="jquery.js"></script> 
    <script> 
    $('html').addClass('js'); 
    $(function() { 
     // do DOM ready stuff 
    }); 
    </script> 
    <style> 
    .js #gall2, .js #gall3, .js #gall4 { display: none; } 
    </style> 
</head> 

आप टी झिलमिलाते से बचने जाएगा उसका तरीका क्योंकि आप डीओएम तैयार से पहले HTML पर कक्षा का नाम जोड़ रहे हैं।

+1

स्पष्ट रूप से यह उदाहरण तब तक काम नहीं करेगा जब तक आप अपने अन्य टैग से पहले jQuery स्क्रिप्ट टैग नहीं डालते। मैं गेम में शुरुआती jQuery निर्भरता से बचने के लिए केवल 'document.documentElement.className + =' js'' 'का उपयोग करने की अनुशंसा करता हूं। –

+0

@ डीसीनेर: बस यहां एक उदाहरण बताते हुए। बेशक आपको jQuery का उपयोग करने से पहले jQuery लाइब्रेरी को शामिल करने की आवश्यकता है। आपका उदाहरण भी काम करता है। – David

0

वे दिखाए जा रहे हैं क्योंकि डिफ़ॉल्ट पर divs संभावना दिखाए जाने के लिए तैयार हैं। चूंकि पृष्ठ पर "तैयार" ईवेंट को निकालने में कुछ सेकंड लग सकते हैं, इसलिए .hide() विधि कॉल तब तक नहीं हिटेंगे जब तक कि पृष्ठ पर सब कुछ लोड और तैयार न हो जाए।

तो मुझे याद है सही .hide() विधि सिर्फ "प्रदर्शन" तत्व के लिए "कोई नहीं" की विशेषता सेट हो जाएगा। इसलिए डिफ़ॉल्ट रूप से div को सीएसएस के माध्यम से छिपाने के लिए सेट करने से उन्हें हमेशा छुपाया जा सकता है, और आपको जेएस के बिना उपयोगकर्ताओं के अतिरिक्त बोनस मिलते हैं।

संबंधित मुद्दे