CSS : 활성 탐색 페이지 메뉴의 색상을 변경하는 방법

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이 포함 PHP 함수를 사용하여 탐색 메뉴의 페이지 템플릿을 호출 :

는 지금까지 CSS는 다음과 같습니다

<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 선택기가하는 일에 대해 혼란스러워지고 생각합니다. 링크를 클릭하면 링크의 색상 만 변경됩니다 (클릭하는 동안 또는 마우스 버튼이 얼마나 오래 머무르는 지). 당신이해야 할 일은 새로운 수업을 소개하는 것입니다. .selected을 CSS에 추가하고 링크를 선택하면 선택한 메뉴 항목을 새로운 클래스로 업데이트하십시오.

<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

이 ID 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

CSS :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>