सीएसएस: सक्रिय नेविगेशन पेज मेनू का रंग कैसे बदलें

Question

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

अब तक सीएसएस इस तरह दिखता है:

div.menuBar 
{ 
    font-family: BirchStd; 
    font-size: 40px; 
    line-height: 40px; 
    font-weight: bold; 
    text-align: center; 
    letter-spacing: -0.1em; 
} 

div.menuBar li{list-style:none; display: inline;} 
div.menuBar li a:active{color:#FF0000;} 
div.menuBar ul{margin:0;} 

और मेरी HTML शामिल पीएचपी फंक्शन का उपयोग करके नेविगेशन मेनू के लिए एक पृष्ठ टेम्पलेट कॉल:

<div class="menuBar"> 
    <ul> 
    <li><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

Answer 1

मुझे लगता है कि तुम क्या a:active CSS चयनकर्ता करता है के बारे में उलझन हो रही है। जब आप इसे क्लिक करते हैं तो यह केवल आपके लिंक का रंग बदल देगा (और केवल क्लिक की अवधि के लिए i.e. आपका माउस बटन कब तक रहता है)। आपको क्या करना है एक नई कक्षा उदा। .selected अपने सीएसएस में और जब आप कोई लिंक चुनते हैं, तो चयनित मेनू आइटम को नई कक्षा के साथ अपडेट करें उदा।

<div class="menuBar"> 
    <ul> 
     <li class="selected"><a href="index.php">HOME</a></li> 
     <li><a href="two.php">PORTFOLIO</a></li> 
     .... 
    </ul> 
</div> 

// specific CSS for your menu 
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS 
li.selected a { color: #FF0000; } 

आप एक selectedPage पैरामीटर में लेने के लिए अपने टेम्पलेट पेज को अपडेट करने की आवश्यकता होगी।

Answer 2

आईडी current जोड़े सक्रिय/वर्तमान पृष्ठ के लिए:

<div class="menuBar"> 
    <ul> 
    <li id="current"><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

#current a { color: #ff0000; } 

Answer 3

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

आपकी समस्या का समाधान करने के लिए आप एक वर्ग बना सकते हैं और वर्तमान पृष्ठ के मेनू में मैन्युअल रूप से इसे जोड़ने के लिए:

a.active { color: #f00 } 

<ul> 
    <li><a href="index.php" class="active">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul>