2012-04-02 17 views
8

पर आधारित क्लास है I लगता है कि एक साधारण सवाल है लेकिन मैं इसे अपने जीवन के लिए काम नहीं कर सकता।jQuery यूआरएल पेज यूआरएल

मैं बस इतना करना चाहता हूं कि पेज पर कुछ जावास्क्रिप्ट जोड़ें जो यूआरएल के आधार पर मुख्य पृष्ठ कंटेनर में कक्षा जोड़ता है।

मान लीजिए कि मैं root.com में एक साइट है और निम्नलिखित एचटीएमएल संरचना (शिथिल बोल) करते हैं:

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id="main" class="wrapper"> 
     Blah, blah, blah 
    </body> 
</html> 

मुझे क्या करना चाहते हैं एक स्क्रिप्ट है कि, अगर पेज = (उदाहरण के लिए) जड़ .com/प्रौद्योगिकी, यह मुख्य div में एक वर्ग जोड़ता है। तो div अब इस तरह दिखेगा:

 <div id="main" class="wrapper tech"> 

मैंने jquery लोड किया है, इसलिए मैं इसे इस तरह से करना चाहता हूं।

उत्तर

23

आप उपयोग कर सकते हैं वर्तमान यूआरएल प्राप्त करने के लिए window.location, और फिर उस पर आधारित स्विच करें:

$(function() { 
    var loc = window.location.href; // returns the full URL 
    if(/technology/.test(loc)) { 
    $('#main').addClass('tech'); 
    } 
}); 

यह देखने के लिए नियमित अभिव्यक्ति का उपयोग करता है कि URL में कोई विशेष वाक्यांश है (विशेष रूप से: technology), और यदि ऐसा है, तो #main तत्व में कक्षा जोड़ें।

switch (window.location.pathname) { 
    case '/technology': 
     $('#main').addClass('tech') 
    case '/something': 
    case '/somestuff': 
     $('#main').addClass('some') 
} 

इस तरह, आप अपने कोड को साफ रखने और आप आसानी से एक अन्य मामले जोड़ सकते हैं:

+0

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

+0

उत्कृष्ट काम महान धन्यवाद। – 422

+0

@alex vidal यह मेरे लिए ठीक काम करता है लेकिन यह सामान्य से थोड़ी देर बाद लोड हो रहा है। उपयोगकर्ता द्वारा निर्धारित किए जाने के बाद मैं एक उप मेनू खोलने के लिए इस क्रिया का उपयोग कर रहा हूं, इसलिए उपयोगकर्ता 1-2 सेक्सी के बाद देख सकता है कि उप श्रेणी मेनू कैसे खुलता है। मैं इसे तुरंत करना चाहता हूं, मैं इससे कैसे बच सकता हूं? –

2

पूर्ण यूआरएल या इसके कुछ हिस्सों को निर्धारित करने के लिए अंतर्निहित ऑब्जेक्ट location का उपयोग करें।

+0

स्पष्ट रूप से यह सही है, लेकिन यह मेरे प्रश्न * कैसे * करने के लिए पूरी तरह से जवाब नहीं देता है। –

2

कुछ मदद चाहिए? अन्य उत्तर के आधार पर, बस कर

console.log (विंडो स्थान)

, अपने स्थान वस्तु से संबंधित जानकारी के आप धन धन कर सकते हैं

 if(window.location.href=== "root.com/technology") { 
     $("#main").addClass("tech"); 
    } 
7

ठीक है, यहाँ मैं इसे कैसे करना होगा है।

here देखें window.location.pathname का अर्थ है।

+0

मुझे यह पसंद है क्योंकि, जैसा कि आप कहते हैं, आप आसानी से चीजों को चकित किए बिना एक और मामला जोड़ सकते हैं। लेकिन मैं इसे काम नहीं कर सकता ... –

+0

मुझे यह जवाब बेहतर है तो चयनित 'सर्वश्रेष्ठ' उत्तर। कंडीशनिंग लिखने के बाद स्विच कथन अधिक साफ होते हैं। – IE5Master

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