सीएसएस के साथ वर्तमान पृष्ठ लिंक का रंग बदलना

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

सीएसएस स्टाइलिंग

वर्तमान पृष्ठ लिंक को स्टाइल करने के लिए, अपनी स्टाइलशीट में निम्नलिखित सीएसएस नियम जोड़ें:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

jQuery स्क्रिप्ट

प्रदान की गई jQuery स्क्रिप्ट आपको वर्तमान पृष्ठ लिंक की पहचान करने और गतिशील रूप से इसमें एक क्लास जोड़ने की अनुमति देती है:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

आपके विशिष्ट पृष्ठ संरचना के आधार पर, आपको लिंक के लिए चयनकर्ता को परिष्कृत करने की आवश्यकता हो सकती है ($("[href]"))। उदाहरण के लिए, यदि लिंक एक नेविगेशन तत्व के भीतर समाहित हैं, तो आप चयन को $("nav [href]") तक सीमित कर सकते हैं।

यदि आपका पृष्ठ यूआरएल पैरामीटर का उपयोग करता है, तो आप तुलना करने से पहले उन्हें हटा सकते हैं यह सुनिश्चित करने के लिए लिंक कि वर्तमान पृष्ठ लिंक पहचाना गया है:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

यह दृष्टिकोण प्रत्येक पृष्ठ के लिए सीएसएस स्टाइल को व्यक्तिगत रूप से संशोधित करने की आवश्यकता को समाप्त करता है।