डिफ़ॉल्ट: सीएसएस के साथ लक्ष्य

मेरे पास यह सीएसएस है:डिफ़ॉल्ट: सीएसएस के साथ लक्ष्य

<style type="text/css"> 
.tab { 
    display: none; 
} 
.tab:target { 
    display: block; 
} 
</style>

और यह HTML:

<div class="tab_container"> 

    <ul class="tabs"> 
    <li><a href="#updates-list">List</a></li> 
    <li><a href="#updates-map">Map</a></li> 
    </ul> 

    <ul class="tab list" id="updates-list"> 
    Eh.. Hello! 
    </ul> 
    <div class="tab map" id="updates-map"></div> 
</div>

हालांकि, यदि कोई लक्ष्य नहीं है (URL में #) निर्दिष्ट है और अभी तक कोई टैब क्लिक नहीं किया गया है, तो मेरा पृष्ठ खाली है। मैं डिफ़ॉल्ट रूप से ul#updates-list दिखाना चाहता हूं।

मैं यह कैसे कर सकता हूं? धन्यवाद।

अद्यतन: इसके आगे, मेरा Google मानचित्र टूटा हुआ है यदि यह प्रारंभिक लक्ष्य नहीं है। क्या किसी को एक फिक्स पता है?

स्रोत

2010-07-28 Anonymous

[CSS3 spec] (http://www.w3.org/TR/css3-selectors/#target-pseudo) से: "यदि दस्तावेज़ के यूआरआई में कोई खंड पहचानकर्ता नहीं है, तो दस्तावेज़ का कोई लक्ष्य तत्व नहीं है। " बू! –

क्यों बू? यदि कोई खंड पहचानकर्ता नहीं है तो आप 'लक्ष्य' से मिलान करने की अपेक्षा करेंगे? मूल तत्व? * प्रत्येक तत्व * (या हर '[आईडी], एक [नाम]')? या दस्तावेज़ के भीतर '[id], एक [name]' के उप-समूह के बीच डिफ़ॉल्ट है, जिसे लेखक अपने इरादे के आधार पर उम्मीद करता है * कभी भी एक खंड पहचानकर्ता के माध्यम से संदर्भित किया जाना चाहिए, ऐसा कुछ न तो सीएसएस और न ही संभवतः डोम भी संभवतः क्या कोई ज्ञान है? – BoltClock

सहज रूप से मुझे यह कहना होगा कि एकमात्र समाधान जो मैं सोच सकता हूं दुर्भाग्य से जावास्क्रिप्ट का उपयोग कर रहा है। कुछ की तरह:

<script type="text/javascript"> 
    if (document.location.hash == "" || document.location.hash == "#") 
    document.location.hash = "#updates-list"; 
</script>

संपादित करें:

ठीक है, एक सीएसएस समाधान मिल गया। हालांकि यह आवश्यकता है डिफ़ॉल्ट प्रविष्टि #updates-list पिछले रखा जाना (#updates-map के बाद और किसी भी अन्य टैब आप जोड़ सकते हैं):

.tab, .tab:target ~ #updates-list { 
    display: none; 
} 
#updates-list, .tab:target { 
    display: block; 
}

स्रोत

2010-07-28 15:27:29 RoToRa

बहुत बहुत धन्यवाद! लेकिन क्या आप इस बारे में कुछ और बता सकते हैं कि आपका सीएसएस समाधान डिफ़ॉल्ट लक्ष्य का चयन कैसे करता है? .tab क्या है? उसने कोई .tab इस्तेमाल नहीं किया? होना चाहिए। टैब्स? या –

'# अपडेट-सूची' डिफ़ॉल्ट है, क्योंकि मैं नियम '# अपडेट-सूची, .tab: target {...}' में निर्दिष्ट कर रहा हूं। '.tab' टैब की सामग्री पर कक्षा है जो स्वयं टैब नहीं है - प्रश्न में सीएसएस में मेरे सीएसएस की तुलना करें। – RoToRa

ठीक है तो दूसरी पंक्ति कहती है कि डिफ़ॉल्ट शैली को उसी शैली में प्रदर्शित करें: लक्ष्य? और पहली पंक्ति कहती है कि यदि लक्ष्य एक भाई है तो लक्ष्य को डिफ़ॉल्ट श्रेणी के समान नहीं है? लेकिन दूसरी लाइन इसे वैसे भी ओवरराइड नहीं करेगा? मैं इसे इस उदाहरण के साथ काम करने की कोशिश कर रहा हूं http://css-tricks.com/examples/CSSTabs/ - http://jsfiddle.net/ArHdb/ बहुत बहुत धन्यवाद –

मुझे लगता है कि आप क्या करना चाहते हैं क्या कुछ .tab_container:not(> :target) > .default की तरह का चयन डिफ़ॉल्ट टैब प्रदर्शित करने के लिए है, जब कोई एक लक्षित है। हालांकि, यह संभव नहीं है क्योंकि :not() छद्म वर्ग केवल साधारण चयनकर्ताओं (यानी :target, > :target नहीं, इस मामले में आप कंटेनर का लक्ष्य जांचेंगे, न कि बच्चों को)।

मैं निम्नलिखित में से किसी करना होगा:

उपयोग जावास्क्रिप्ट लोड पर पहला टैब के लिए लक्ष्य निर्धारित करने के लिए (या बस आवश्यकता है कि लंगर मौजूद है)।
पहले सक्रिय टैब के लिए एक विशिष्ट ओवरराइड क्लास जोड़ें और पहले टैब स्विच के बाद इसे (जावास्क्रिप्ट के साथ) हटा दें।

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

स्रोत

2010-07-28 15:54:23 kolizz

संगतता कोई समस्या नहीं है। मुझे केवल वेबकिट की परवाह है। –

यह * भविष्य में '.tab_container के साथ संभव हो सकता है: नहीं (: है (>: लक्ष्य))> .default', लेकिन केवल अगर बच्चे के संयोजक के साथ': है() 'सीएसएस में बनाता है। अन्यथा आपको अभी भी जावास्क्रिप्ट का उपयोग करना होगा। (एफडब्ल्यूआईडब्ल्यू, उदाहरण मैंने आज पूरी तरह से jQuery में काम किया है।) – BoltClock

उपयोगी:

.tab#tabControl { display:block; } 

.tab:not(:target) { display:none; } 

.tab:target ~ #tabControl { display:none; }

स्रोत

2013-03-08 13:02:57

मैं जानता हूँ कि यह एक पुराने सवाल है, लेकिन यह अभी भी प्रासंगिक है और मैं एक और सुझाव है:

<a href="#tab1">Tab 1</a> 
<a href="#tab2">Tab 2</a> 

<a id="tab1"></a> 
<a id="tab2"></a> 

<div class="tab tab1 default-tab">Some content</div> 
<div class="tab tab2">Some other content</div>

और सीएसएस:

.tab {display:none} 

.default-tab {display:block} 

:target ~ .default-tab {display:none} 

#tab1:target ~ .tab1, 
#tab2:target ~ .tab2 { 
    display: block 
}

यह हालांकि आप चाहते हैं कि टैब को आदेश दिया गया हो, लेकिन यदि आप गतिशील रूप से HTML उत्पन्न कर रहे हैं तो आपको css dy उत्पन्न करना होगा namically। या फिर जब आप सीएसएस लिखते हैं तो समर्थन के लिए अधिकतम संख्या में टैब चुनें। यदि यह वर्तमान अस्तित्वहीन या खाली # है

location=location.hash||"#updates-list"

यह केवल एक वैध हैश पर रीडायरेक्ट:

स्रोत

2015-03-30 11:10:44

अंत में! यह पहली बात है जो मैंने पाया है कि काम करता है। मैं .default-tab के बजाय #home का उपयोग कर रहा हूं, लेकिन फिर भी। गजब का। धन्यवाद। मैंने पाया कि दूसरा समाधान उपयोग कर रहा था: आखिरकार, और वह बिल्कुल काम नहीं कर रहा था। इसमें अभी भी समस्या है कि डिफ़ॉल्ट टैब अंतिम होना चाहिए, लेकिन यदि आप एक समय में केवल एक ही प्रदर्शित कर रहे हैं, तो यह एक गैर-मुद्दा है। धन्यवाद। – RoboticRenaissance

यह कम से कम जवाब मैं मिल सकता है हो रहा है।

~ 98% उपयोगकर्ताओं के पास जावास्क्रिप्ट सक्षम है, इसलिए एक जेएस समाधान वास्तव में कोई समस्या नहीं होनी चाहिए।

स्रोत

2015-09-09 03:49:26 nobody

उत्तर

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