2012-12-19 18 views
5

में महत्वपूर्ण और .css मैं एक समस्या में आया। मैंने कुछ "टैब" कार्यक्षमता बनाई है जिसे डेमो में देखा जा सकता है: http://jsfiddle.net/4FLCe/बीजी रंग, होवर,! जावास्क्रिप्ट

योजना जब आप टैब पर होवर करते हैं, तो रंग रंग ए पर बदल जाता है, जब आप टैब पर क्लिक करते हैं, तो इसका रंग रंग में बदल जाता है बी

डेमो से देखा जा सकता है, क्लिक पृष्ठभूमि पृष्ठभूमि रंग होवर पर बदलना बंद कर दिया। मैंने होवर के पृष्ठभूमि रंग में !important जोड़ने का विचार किया, परिणाम देखे जा सकते हैं: http://jsfiddle.net/4FLCe/1/

लेकिन जैसा कि मैंने नहीं किया था, होवर अब जावास्क्रिप्ट से पृष्ठभूमि रंग सेट पर काम करेगा। फिर मैंने जावास्क्रिप्ट में रंग सेट में !important जोड़ा। इसके परिणामस्वरूप कुछ भयानक हुआ। एकमात्र ब्राउज़र जो समझ गया कि मैं जो हासिल करना चाहता था वह ओपेरा था।

अन्य ब्राउज़रों ने बस जेएस से आवेदन करना बंद कर दिया। डेमो: http://jsfiddle.net/4FLCe/2/

तो सवाल है: कैसे अगले प्राप्त करने के लिए - काम कर मंडराना, चयनित टैब की पृष्ठभूमि उच्चतर 'प्राथमिकता' की तुलना में तो मंडराना यह हॉवर पर मंडराना की पृष्ठभूमि करने के लिए परिवर्तन नहीं होगा, और में एक ही परिणाम है यानी सफारी, ओपेरा, क्रोम, एफएफ?

+3

पर करने के लिए

$(function() { $('.pagecontent').eq(0).show(); $('.tab').click(function() { $('.pagecontent').hide(); $('.selected-tab').removeClass('selected-tab'); $(this).addClass('selected-tab'); $('.pagecontent').eq($(this).index()).show(); }); }); 

डेमो अपना कोड बदलें उस पर एक सीएसएस वर्ग सेट करें और नियमों का उपयोग करें जो [सीएसएस निर्दिष्ट करें शहर] (http://coding.smashingmagazine.com/2007/07/27/css- विशिष्टता-things-you-should-know/) आपके लाभ के लिए! – epascarello

उत्तर

6

इसके बजाय आप .css() विधि के माध्यम से यह स्थापित करने का एक class का उपयोग करना चाहिए ..

तो

.selected-tab{ 
    background-color:#d6d6d6!important; 
} 

बना सकते हैं और http://jsfiddle.net/gaby/4FLCe/3/

+0

महान काम करता है। बहुत बहुत धन्यवाद –

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