如何在CSS导航中创建活动状态

Question

我在按钮上的鼠标菜单上有两个按钮将图像更改为另一个图像，但在鼠标上它仍然回到它的原始图像我想要做什么是当我点击此按钮它的数据应该是活跃的，以便人们可以知道他现在访问哪个页面。 我的代码是

#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> 

现在给出的类别中选择菜单背景图片所以才有了家的图像会有活跃的背景。如果你不使用精灵然后做这样的

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

然后调用

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

要发送变量

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