CSS 탐색에서 활성 상태를 만드는 방법

Question

버튼 위에 마우스를 올려 놓으면 이미지가 다른 이미지로 바뀌지 만 마우스를 사용하면 원래 이미지로 되돌아갑니다.이 버튼을 클릭하면 그것은 그가 현재 방문하고있는 페이지를 알 수 있도록 stat가 활성화되어 있어야합니다. 내 코드는

#menu 
{width: 628px; 
height: 69px; 
padding-left: 380px; 
} 
#menu ul { list-style: none;} 

#menu li { display: inline;} 
#menu a { float: left; 
    width: 107px; 
    height: 28px; 
     display: block; 
    } 
#menu a:hover { width: 107px; 
     height: 28px; 
} 
#emailUs 
    { display: block; 
    width: 107px; 
    height: 28px; 
    background: url("../images/add_1.png") no-repeat 0 0; 
} 
#emailUs:hover 
    { 
    background: url("../images/add_h.jpg") no-repeat 0 0; 
    } 

하고 HTML 코드는

#menu 
{ 
width: 628px; 
height: 69px; 
padding-left: 380px; 

} 

#menu ul { 
    list-style: none; 
} 

#menu li { 

    display: inline; 
} 

#menu a { 
    float: left; 
    width: 107px; 
    height: 28px; 
     display: block; 


} 

#menu a:hover { 
    width: 107px; 
     height: 28px; 



} 

#emailUs 
    { 
    display: block; 
    width: 107px; 
    height: 28px; 
    background: url("../images/add_1.png") no-repeat 0 0; 

    } 

    #emailUs:hover 
    { 
    background: url("../images/add_h.jpg") no-repeat 0 0; 
    } 

주 : 내 이미지는 구분 이미지가 아닌 스프라이트 이미지입니다.

당신은 내가 무엇을 달성하고자하는 데모를 볼 수 있습니다 (www.daniweb.com)

Answer 1

는 페이지 당신이있는 프로그램에서 varible를 보냅니다. 그리고 예를 들어, 활성 또는 비활성 및 클래스

CSS 클래스를 추가 :

<a href="home.php" class="selectedmenu">Home</a> 
<a href="myaccount.php" class="">My Account</a> 

지금 너무에만 홈 ​​이미지가 활성화 된 배경이있을 것이다 클래스 선택한 메뉴에 대한 배경 이미지를 제공합니다. 당신이 스프라이트를 사용하지 않을 경우, 다음

#home .selectedmenu{ 
background-image:url('homeselected.png'); 
} 

는 CSS를 budy에 변수

<?php 
$menuSelected ='home'; 
?> 
<a href="home.php" class="<?php if ($menuSelected=='home')echo ('selectedmenu');?>">Home</a>