2008-10-07 7 views
10

क्षमा करें अगर यह वास्तव में बेवकूफ सवाल की तरह लगता है, लेकिन जब आप उस पृष्ठ पर हैं, तो मुझे एक लिंक बदलने का रंग बनाना होगा।मैं वर्तमान पृष्ठ के आधार पर एक लिंक कैसे हाइलाइट करूं?

उदाहरण के लिए, जब आप स्टैक ओवरफ्लो के "प्रश्न" पृष्ठ पर होते हैं, तो शीर्ष पर वाला लिंक रंग बदलता है। आप यह कैसे करते हैं?

+0

प्रश्न अच्छी तरह से ही बना है। तो यह बेवकूफ नहीं है। :) –

उत्तर

4

यह एक सर्वर-साइड चीज है - पृष्ठ को प्रस्तुत करते समय, लिंक पर "वर्तमान-पृष्ठ" जैसी कक्षा जोड़ें। फिर आप इसे अन्य लिंक से अलग से स्टाइल कर सकते हैं।

उदाहरण के लिए, StackOverflow class="youarehere" के साथ लिंक प्रस्तुत करता है जब यह उस पृष्ठ को इंगित करता है जो आप पहले से ही कर रहे हैं।

2

प्रत्येक पृष्ठ (मैन्युअल रूप से या सर्वर-साइड) के लिए बॉडी टैग पर एक वर्ग सेट करें। फिर अपने सीएसएस में उस क्लास का उपयोग यह पता लगाने के लिए करें कि आप किस पेज पर हैं और तदनुसार आइटम पर स्टाइल अपडेट करें।

body.questions #questionsTab 
{ 
    color: #f00; 
} 

Here's a good longer explanation

-2

आप इस के लिए सर्वर पर कोड की जरूरत है। एक सरल दृष्टिकोण वर्तमान पृष्ठ के यूआरएल को लिंक में यूआरएल से तुलना करना है; हालांकि मान लें कि स्टैक ओवरफ्लो में कई अलग-अलग यूआरएल हैं जिनके परिणामस्वरूप 'प्रश्न' टैब को हाइलाइट किया जा रहा है।

एक और परिष्कृत संस्करण सत्र में कुछ डाल सकता है जब आप पेज बदलते हैं (बहुत मजबूत नहीं); प्रत्येक मेनू आइटम के लिए प्रासंगिक पृष्ठों/यूआरएल पैटर्न की एक सूची स्टोर करें; या पृष्ठ के कोड के भीतर, यह निर्धारित करने के लिए एक चर सेट करें कि कौन सा आइटम हाइलाइट करना है।

फिर, जैसे जॉन मिलिकिन सुझाव देते हैं, लिंक पर एक वर्ग या अपने वर्तमान तत्वों जैसे "वर्तमान-पृष्ठ" पर एक वर्ग डालें जो इसके रंग को नियंत्रित करेगा।

5

यह वास्तव में इस पर निर्भर करता है कि आपका पृष्ठ कैसा बनाया गया है। आमतौर पर, मैं इस सीएसएस का उपयोग कर जाहिर करना होगा, और लिंक एक आईडी "सक्रिय" कहा जाता देना आवंटित ...

<a id="active" href="thisPage.html">this page</a> 

... और सीएसएस में ...

a#active { color: yellow; } 

यह है एक काफी सरल उदाहरण है, लेकिन यह सामान्य विचार को दर्शाता है।

+2

यह वास्तव में एक वर्ग का उपयोग किया जाना चाहिए, आईडी –

+0

क्षमा करें, जॉन, लेकिन मैं यहां अलग होना चाहता हूं। चूंकि यह एक नेविगेशन लिंक है जिसे प्रश्न में संदर्भित किया गया था, और यह केवल पृष्ठ पर एक बार दिखाई देने वाला है, एक आईडी अधिक उपयुक्त है। यदि यह पृष्ठ पर एक से अधिक बार प्रकट होने वाला था, तो एक वर्ग अधिक उपयुक्त होगा। –

+0

और यदि आपके पास एक गैर-सक्रिय कक्षा भी थी? मैं बजाय एक वर्ग का उपयोग करता हूं और इसे सभी एक ही प्रकार में रखता हूं, लेकिन या तो ठीक काम करता है। –

3

आप इसे प्रत्येक पृष्ठ के लिए लिंक को वास्तव में संशोधित किए बिना कर सकते हैं।

स्टैक ओवरफ़्लो क्लोन मैं Django के साथ निर्माण कर रहा हूँ में, मैं यह कर रहा हूँ:

<!-- base.html --> 
... 
<body class="{% block bodyclass %}{% endblock %}"> 
... 
<div id="nav"> 
    <ul> 
    <li id="nav-questions"><a href="{% url questions %}">Questions</a></li> 
    <li id="nav-tags"><a href="{% url tags %}">Tags</a></li> 
    <li id="nav-users"><a href="{% url users %}">Users</a></li> 
    <li id="nav-badges"><a href="{% url badges %}">Badges</a></li> 
    <li id="nav-ask-question"><a href="{% url ask_question %}">Ask Question</a></li> 
    </ul> 
</div> 

तब तो पेज टेम्पलेट्स में तरह bodyclass में भरने:

<!-- questions.html --> 
{% extends "base.html" %} 
{% block bodyclass %}questions{% endblock %} 
... 

फिर, के साथ निम्नलिखित सीएसएस, प्रत्येक पृष्ठ के लिए उपयुक्त लिंक हाइलाइट किया गया है:

body.questions #nav-questions a, 
body.tags #nav-tags a, 
body.users #nav-users a, 
body.badges #nav-badges a, 
body.ask-question #nav-ask-question a { background-color: #f90; } 
+0

बस उत्सुक, आप क्लोन क्यों बना रहे हैं? – eyelidlessness

+0

http://stackoverflow.com/questions/172516/ –

0

एस वर्तमान पृष्ठ पर लिंक पर केवल एक वर्ग स्थापित करके, इवर साइड कोड सबसे आसान है, लेकिन जावास्क्रिप्ट के साथ क्लाइंट-साइड पर भी यह संभव है, किसी विशेष वर्ग के सभी तत्वों पर दूसरी कक्षा स्थापित करना जिसमें एक href है जो मेल खाता है वर्तमान पृष्ठ

आप या तो document.getElementsByTagName() या document.links [] का उपयोग करें और केवल अपने नेविगेशन लिंक दर्शाने एक वर्ग के लोगों के लिए देखो और फिर वर्तमान दर्शाने अगर यह मौजूदा URL से मेल खाता एक द्वितीय श्रेणी सेट कर सकते हैं।

URL संबंधित होंगे, जबकि document.URL नहीं होगा। लेकिन यदि आप टेबल-संचालित डिज़ाइन से सामग्री उत्पन्न कर रहे हैं और उपयोगकर्ता वैसे भी पूर्ण या सापेक्ष यूआरएल डाल सकते हैं तो सर्वर-साइड पर आप कभी-कभी समान समस्या बना सकते हैं।

2

किसी कारण आप सर्वर साइड पर इस संभाल करने के लिए नहीं करना चाहते हैं के लिए, तो आप इस कोशिश कर सकते हैं:

// assuming this JS function is called when page loads 
onload() 
{ 
    if (location.href.indexOf('/questions') > 0) 
    { 
    document.getElementById('questionsLink').className = 'questionsStyleOn'; 
    } 
} 
+1

के लिए शुरुआती बिंदु के रूप में यह ऑनलोड() भ्रमित है। शायद window.onload = function() {} बेहतर है – Bor